AngularJS自定義指令中的自定義過濾器

Question

我已經看到了其他一些問題，這些問題與我的問題類似，但我無法把握實現的方式。

在這個pl ： Plunk示例。

    var app = angular.module('myApp', ['directives', 'services']);

angular.module('services', []).filter('selectedItems', function() {
  return function(fields, parent) {
    var arrayFields = [];
    for (var i = parent; i < fields.length; i++) {
      if (fields[i].Parent == parent) {
        arrayFields.push(fields[i]);
      }
    }
    return arrayFields;
  };
});

angular.module('directives', ['services']).directive('itemlist', ['selectedItemsFilter',
  function(selectedItems) {
    var listDirective = {
      restrict: "E",
      scope: {
        Children: '=itemchild'
      },
      link: function(scope, element, attrs) {
        // scope.Children = attrs.itemchild;
        console.log(scope.Children);
      },
      template: function(element, attrs) {
        return '<ul>'
        // +'<li ng-repeat="item in mainList | Items:'+attrs.itemparent+'">'
        + '<li ng-repeat="item in mainList | selectedItems:' + attrs.itemparent + '">' + '{{item.itemTitle}}'

        + '</li>{{Children}}' + '</ul>';
      },
    };
    return listDirective;
  }
]);

app.controller('listTemplater', function($scope) {
  $scope.information = {
    header: "List Controll template!"
  };
  $scope.mainList = [{
    itemTitle: "Item 1",
    value: "1",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 1.1",
    value: "4",
    Parent: "1",
    children: true
  }, {
    itemTitle: "Item 1.1.1",
    value: "13",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.1.2",
    value: "14",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.1.3",
    value: "15",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.2",
    value: "5",
    Parent: "1",
    children: false
  }, {
    itemTitle: "Item 1.3",
    value: "6",
    Parent: "1",
    children: false
  }, {
    itemTitle: "Item 2",
    value: "2",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 2.1",
    value: "7",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 2.2",
    value: "8",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 2.3",
    value: "9",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 3",
    value: "3",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 3.1",
    value: "10",
    Parent: "3",
    children: false
  }, {
    itemTitle: "Item 3.2",
    value: "11",
    Parent: "3",
    children: false
  }, {
    itemTitle: "Item 3.3",
    value: "12",
    Parent: "3",
    children: false
  }, ];

  $scope.debug = function() {
    console.log($scope.innerLists);
  }
});

我正在嘗試使用AngularJS復制第一個列表。 在插件中，您將找到一個包含所有列表項以及彼此之間關系的對象。
我創建了一個自定義指令，並試圖通過一個自定義過濾器。
每次我在過濾器上出現注射錯誤時。
任何建議將不勝感激！

Answer 1

只需從您的指令中刪除過濾器的dependency selectedItemsFilter ，即可正常工作。

無需在指令內添加過濾器依賴項。 您可以通過在視圖上呈現它時僅過濾名稱來使用它。

過濾

angular.module('services', []).filter('selectedItems', function() {
    return function(fields, parent){
      if(fields){ // added check for safe code
        var arrayFields = [];
        for (var i = parent; i < fields.length; i++) {
            if (fields[i].Parent == parent) {
                arrayFields.push(fields[i]);
            }
        }
        return arrayFields;
      }
    };
});

這是工作小提琴