Angular "Unknown provider" error when using $filter in directive

Question

I've got a directive that needs to use angular's $filter in the code. However, when trying to use it, I'm getting an error:

[$injector:unpr] Unknown provider: FilterProvider <- Filter

Here's a minimal example of what's causing the error: http://jsfiddle.net/5tLtj3nh/

I'm stumped trying to figure out what I'm doing wrong.

Answer 1

You are using the $filter service incorrectly.

You have to get a filter from $filter service first like this:

var filterFilter = $filter('filter');
filterFilter([], 'query');

or a one liner:

$filter('filter')([], 'query');

In case you are confused, the 'filter' filter is one of the build-in filters of angularjs.

There are many more, see: https://docs.angularjs.org/api/ng/filter

• currency
• date
• filter
• json
• limitTo
• lowercase
• number
• orderBy
• uppercase

Tip: You could also inject an individual filter to use like this:

app.directive('testDirective', ['filterFilter', function(filterFilter) {
    return {
        restrict: 'E',
        template: '<div>testDirective</div>',
        link: function(scope, elem, attrs) {
            filterFilter([], 'query');
        }
    }
}]);