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.

Do you want to filter array by query string? If so, you should use $filter('filter')([], 'query'); BTW, better to post code here — IUnknown
– IUnknown, Commented Aug 8, 2014 at 18:38

runTarm · Accepted Answer · 2014-08-08 18:55:13Z

5

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');
        }
    }
}]);

answered Aug 8, 2014 at 18:55

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sslepian Over a year ago

Looks like I completely missed that in the docs. Thanks for clarifying that for me.

Beyers · Accepted Answer · 2014-08-08 18:54:30Z

1

As mentioned in the comments, your syntax is wrong. To use the filter $filter the syntax as per the documentation is:

$filter('filter')(array, expression, comparator)

Assuming you want to filter based on the query string you'll need:

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

answered Aug 8, 2014 at 18:54

Beyers

9,11847 silver badges59 bronze badges

1 Comment

sslepian Over a year ago

Accepted runTarm's answer since I can only accept one, but this also solved my issue, so thank you.

CredibleAshok · Accepted Answer · 2017-05-03 07:05:05Z

for working plnkr

http://plnkr.co/edit/US6xE4h0gD5CEYV0aMDf?p=preview

check how your angular environment is setup. Follow Steps:

check if your Index.html has loaded script.

<script src="scripts/angular-filter.js"></script>

check if $filter is used in your controller

    (function () {
    'use strict';
    var controllerId = 'controllerName';
    angular.module('myApp')
    .controller(controllerId, ['$rootScope', '$scope', '$timeout', 'security', '$filter', functionName]);
    function functionName($rootScope, $scope, $timeout, security, $filter) {
        // your controller code.
    }})();

You html page is using FilterBy

    <tr ng-repeat="row in tableList | filterBy: ['col1','col2','col3'] : vm.listFilter">
        <td class="text-left">{{row.col1}}</td>
        <td class="text-left">{{row.col2}}</td>
        <td class="text-left">{{row.col3}}</td>
    </tr>

Don't forget to include dependency while loading angular

    var app = angular.module('app', [
    'common',           // These are just example, can be anything
    'common.bootstrap', 
    'security',         
    'nsPopover', 'angular.filter'
    ]);

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related