AngularJS Custom指令中的自定义过滤器

Question

我已经看到了一些与我类似问题的其他问题，但我无法理解这样做的方式。

在这篇文章中：Plunk example.

    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

只需从您的指令中删除过滤器的依赖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;
      }
    };
});

Here is Working Fiddle