“Unknown Provider” when injecting custom filter into service

Question

Im trying to filter the results of my search application with a custom filter. Now, the angular documentation states that you should avoid defining stateful filters. My workaround was building a service which handles the filter inputs and custom filter which takes these inputs as an argument object.

This concept worked fine while I had an implementation which did this just in the service with a custom filtering function. Now I moved it over to a filter declaration, like this:

referenceFilter.filter.js

(function () {
'use strict';

angular.module('searchApp.search')
    .filter('referenceFilter', function () {
        return function (references, filterModel) {

            var filteredReferences = [];
            /* filtering */
            return filteredReferences;
        }
    });
})();

Now when I am trying to inject the filter into my service I get the "Unknown Provider"-Error stating that it cant find a Provider for my referenceFilter. Although I think its injected properly and defined before the service.

referenceFilter.service.js

(function () {
    'use strict';

    angular.module('searchApp.search')
        .factory('referenceFilterService', ['referenceFilter', referenceFilterService]);

    function referenceFilterService(referenceFilter) { // 'reference' | 'referenceFilter' doesnt make a difference
              ....
              /* filter call */
              function getFilteredReferences(references) {
                    return referenceFilter(references, filterModel);
              }
              ....
    }

})();

Including in index.html

<script src="search/search.module.js"></script>
<script src="search/filter/referenceFilter.filter.js"></script>
<script src="search/filter/referenceFilter.service.js"></script>

What am I doing wrong?

Answer 1

You should not inject your filter directly, use the built-in $filter service instead:

angular.module('searchApp.search')
    .factory('referenceFilterService', ['$filter', referenceFilterService]);

function referenceFilterService($filter) {
    var referenceFilter = $filter('referenceFilter');
    // etc.