Custom Filter in AngularJS Custom directive

Question

I 've seen some other questions with similar problem as mine but I can't grasp the way that this is done.

In this plunk : 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);
  }
});

I am trying to replicate the first list with AngularJS. In the plunk you 'll find an object with all the list items and the relations with each other.
I created a custom directive and I am trying to pass a custom filter.
Every time I get an injection error on the filter.
Any suggestions will be appreciate!

Answer 1

Just Remove dependancy selectedItemsFilter of filter from your directive all will works fine.

No need to add filter dependency inside directive. You can use it by just filter name as you are rendering it on view.

Filter

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