title: Angular Directive: Pass event data to Page Controller Method when user Clicks Menu Item
body: <p>I have a hierarchical menu system with nested categories that allows users to drill down the hierarchy to lower levels.</p>
  
  <p>I have a click event that is used to drill down in to the menu when there are children.</p>
  
  <p>When they reach the final level (known as Leaf), I want to fire a methods(data) on the page controller with information about the node they just selected.</p>
  
  <p><a href="https://i.stack.imgur.com/gqTAz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gqTAz.png" alt="Visual"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Yniou.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yniou.png" alt="Works up to here"></a></p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>angular.module(APP)
  
    .directive('wkProductCategoryMenu', [function () {
        return {
          restrict: 'E',
          require: "?ngModel",
          scope: {
            heading: '=',
            onMenuLeafSelect: '&amp;'
          },
          templateUrl: COMPONENTS_PATH + '/productCategoryMenu/productCategoryMenu.html',
          controller: 'ProductCategoryMenuController',
          link: function (scope, element, attrs, ngModel) {
            if (!ngModel) {
              return;
            }
  
            scope.parentCategories = [];
  
            ngModel.$render = function () {
              scope.focusCategories = ngModel.$modelValue;
            };
          }
        };
      }
    ])
  ;
  </code></pre>
  
  <p><strong>Directive Controller</strong></p>
  
  <pre><code>angular.module(APP)
  
  .controller('ProductCategoryMenuController',
    ['$scope', '$log', function 
      ($scope, $log)
  
    {
  
      $scope.selectMenu = function (menu) {
        var name = menu.name;
  
        $log.info('Select: ' + name);
  
        for (var i = 0; i &lt; $scope.focusCategories.length; i++) {
  
          if (_.isEqual($scope.focusCategories[i].name, name)) {
  
            if (menu.isLeaf) {
              $log.warn('Trigger for menu: ' + name + " : " + menu.hierarchy);
  
              if ($scope.onMenuLeafSelect) {
                $scope.onMenuLeafSelect(menu);
              }
            } else {
              $scope.parentCategories.push($scope.focusCategories);
              $scope.focusCategories = $scope.focusCategories[i].categories;
            }
  
          }
  
        }
      }
  
      $scope.back = function () {
        $log.info('Back');
  
        $scope.focusCategories = $scope.parentCategories.pop();
      }
  
    }]);
  </code></pre>
  
  <p><strong>Use the Directive in Page</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
  
          &lt;wk-product-category-menu 
              heading="model.filter.supplier.supplier" 
              ng-model="model.entity.categories" 
              on-menu-leaf-select="getProducts(productCategory)"&gt;
  
          &lt;/wk-product-category-menu&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Page Events</strong></p>
  
  <pre><code>    // -------------------------------------------------------------------------------------------------------
      // Page Events
      // -------------------------------------------------------------------------------------------------------
      $scope.getProducts = function (productCategory) {
        $log.info("ProductCategory");
  
        // THIS is UNDEFINED
        $log.error(JSON.stringify(productCategory));
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/L6E3d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L6E3d.png" alt="Undefined"></a></p>
  
  <p><strong>Sample Data</strong></p>
  
  <pre><code>{
    "_id": "561f6304512106cfa84920b0",
    "active": true,
    "supplier": "All",
    "productCount": 6891,
    "categoryCount": 13,
    "categories": [
      {
        "isLeaf": false,
        "isRoot": true,
        "categories": [
          {
            "isLeaf": false,
            "isRoot": false,
            "categories": [
              {
                "isLeaf": true,
                "isRoot": false,
                "categories": [
  
                ],
                "productCount": 15,
                "name": "Premium"
              },
              {
                "isLeaf": true,
                "isRoot": false,
                "categories": [
  
                ],
                "productCount": 38,
                "name": "Craft"
              }
            ],
            "productCount": 53,
            "name": "Domestic Beer"
          },
          {
            "isLeaf": false,
            "isRoot": false,
            "categories": [
              {
                "isLeaf": true,
                "isRoot": false,
                "categories": [
  
                ],
                "productCount": 6,
                "name": "Craft"
              }
            ],
            "productCount": 28,
            "name": "International Beer"
          },
          {
            "isLeaf": true,
            "isRoot": false,
            "categories": [
  
            ],
            "productCount": 18,
            "name": "Cider"
          },
          {
            "isLeaf": true,
            "isRoot": false,
            "categories": [
  
            ],
            "productCount": 4,
            "name": "Bitters"
          }
        ]
      }
    ]
  }
  </code></pre>