角度指令：当用户点击菜单项

Question

我有一个带有嵌套类别的分层菜单系统，允许用户向下钻取层次结构。

我有一个点击事件，用于在有孩子时深入查看菜单。

当它们到达最终级别（称为Leaf）时，我想在页面控制器上触发一个方法（数据），其中包含有关他们刚刚选择的节点的信息。

指令

angular.module(APP)

  .directive('wkProductCategoryMenu', [function () {
      return {
        restrict: 'E',
        require: "?ngModel",
        scope: {
          heading: '=',
          onMenuLeafSelect: '&'
        },
        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;
          };
        }
      };
    }
  ])
;

指令控制器

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 < $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();
    }

  }]);

使用页面

中的指令

<div class="row">
    <div class="col-lg-12">

        <wk-product-category-menu 
            heading="model.filter.supplier.supplier" 
            ng-model="model.entity.categories" 
            on-menu-leaf-select="getProducts(productCategory)">

        </wk-product-category-menu>

    </div>
</div>

页面活动

    // -------------------------------------------------------------------------------------------------------
    // Page Events
    // -------------------------------------------------------------------------------------------------------
    $scope.getProducts = function (productCategory) {
      $log.info("ProductCategory");

      // THIS is UNDEFINED
      $log.error(JSON.stringify(productCategory));
    }

示例数据

{
  "_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"
        }
      ]
    }
  ]
}

Answer 1

当您触发事件时，使用如下对象传递数据：

$scope.onMenuLeafSelect({productCategory: menu});