1

所以我写了一个 angularjs 指令来简化下拉列表的渲染：

'use strict';

angular.module('myApp')
  .directive('filterDropdowns', function () {
    return {
      restrict: 'A',
      template: '<a class="wrapper-dropdown" data-dropdown="{{ labelData }}">{{ label }}</a>' +
                '<ul id="{{ labelData }}" class="f-dropdown">' + 
                  '<li ng-repeat="item in items">' + 
                    '<a ng-click="setFilter(item.district)">{{ item.district }}</a>' +
                  '</li>' +
                '</ul>',
      scope: {
        label: '@label',
        labelData: '@labelData',
        dropdownValue: '=' // expects an object from the directive
      },
      link: function (scope, element, attrs) {
        scope.$watch('dropdownValue', function(dropdownValue) {
          if (dropdownValue) {
            scope.items = dropdownValue;
          }
        });
      }
    };
  });

我可以通过这种方式轻松地在我的视图中使用它：-

<div filter-dropdowns label="Districts" label-data="districts-data" dropdown-value="districts"></div>

<div filter-dropdowns label="Countries" label-data="countries-data" dropdown-value="countries"></div>

问题在于{{ item.district }}我的指令中的使用。

根据我传递给指令的对象列表，我实际上需要渲染{{ item.country }}，{{ item.area }}所以我不应该 {{ item.district }}在指令的模板中硬编码或传递item.district到setFilter().

什么是解决这个问题的好方法，这样我就不需要{{ item.district }}在我的指令代码中硬编码或传递item.district给setFilter()？

4

2 回答 2

3

允许指令的用户指定要使用的项目键名（可能称为“displayableItemKey”）：

<!-- Proposed usage -->
<div filter-dropdowns label="Districts" label-data="districts-data"
     dropdown-value="districts" displayable-item-key="district"></div>

然后链接到您的指令范围：

scope: {
  ...,
  displayableItemKey: '@'
},

最后在指令模板中：

...
'<a ng-click="setFilter(item[displayableItemKey])">{{ item[displayableItemKey] }}</a>' +
...
于 2013-07-30T04:29:20.293 回答
0

您可以使其{{ item.district }}更通用{{ item.name }}，您可以将数据源从地区转换为名称，然后传入指令。请看一下这段代码。

Demo on Fiddle

function Cntl($scope) {
    var districts = [{
        district: "PA"
    }, {
        district: "NJ"
    }, {
        district: "MD"
    }];

    $scope.districts = [];
    angular.forEach(districts, function (item) {
        $scope.districts.push({
            name: item.district
        });
    });

    var countries = [{
        district: "USA"
    }, {
        district: "Mexico"
    }];
    $scope.countries = [];
    angular.forEach(countries, function (item) {
        $scope.countries.push({
            name: item.district
        });
    });
}

angular.module('MyApp', []).directive('filterDropdowns', function () {
    return {
        restrict: 'A',
        template: '<a class="wrapper-dropdown" data-dropdown="{{ labelData }}">{{ label }}</a>' +
            '<ul id="{{ labelData }}" class="f-dropdown">' +
            '<li ng-repeat="item in items">' +
            '<a ng-click="setFilter(item.name)">{{ item.name }}</a>' +
            '</li>' +
            '</ul>',
        scope: {
            label: '@label',
            labelData: '@labelData',
            dropdownValue: '=' // expects an object from the directive
        },
        link: function (scope, element, attrs) {
            scope.$watch('dropdownValue', function (dropdownValue) {
                if (dropdownValue) {
                    scope.items = dropdownValue;
                }
            });
        }
    };
});
于 2013-07-30T04:30:24.283 回答