Question

我通过在angularjs中使用事件来创建完全解耦的指令。作为一个例子，我正在使用创建搜索指令并以这种方式实现它。

'use strict';

angular.module('app')
  .directive('search', function () {
    return {
      scope: true,
      restrict: 'E',
      controller: function($rootScope) {
          var vm = this;

          vm.onChange = function (searchValue) {
            $rootScope.$broadcast('searchbox-valuechanged', {data: searchValue});
          };
      },
      controllerAs: 'ctrl',
      bindToController: true,
      templateUrl: 'search.html'
    };
  });

而html看起来像这样：

<input type="search" placeholder="Search"
  ng-model="ctrl.searchValue"
  ng-model-options="{debounce: 100}"
  ng-change="ctrl.onChange({search: ctrl.searchValue})">

现在我想创建另一个指令，我可以添加到另一个指令或元素，这将使它的列表项可搜索。所以我命名了指令searchable

'use strict';

angular.module('ap')
  .directive('searchable', function () {
    return {
      restrict: 'A',
      scope: {
        by: '@'
      },
      controller: function($rootScope, $scope) {
        var vm = $scope.ctrl;
        var items = vm.items;


        $rootScope.$on('ecal:searchbox-valuechanged', function(e, msg) {
          console.log(vm);
        });
      }
    };
  });

在我看来，我应该能够使用searchable指令，如下所示：

<list-directive items="ctrl.items" searchable by="tags,title"></list-directive>

而可搜索的指令应该能够遍历parent指令中的项并解析列表并仅返回属性值等于by列表的项。

更新

所以问题是：

如何从父指令

items

如何过滤列表，以便使用过滤的项目（与搜索值匹配的项目）更新列表指令

谢谢！

用于向另一个指令添加行为的属性指令

0 个答案: