$filter is not a function AngularJS

Question

app.controller('myController', ['$scope', '$http', '$filter', function($scope, $http, $filter) {

The above is an example of my code where I am trying to use $http.get and also $filter inside my controller.

The only problem is when I use it like so, the console log throws an error that says $filter is not a function.

app.controller('myController', ['$scope', '$http', '$filter', function($scope, $filter, $http) {

When I swap them round it throws an error that $http is undefined

You have to declare $filter in the dependency list, i.e. ['$scope', '$http', '$filter', function($scope, $http, $filter) {... — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 18, 2014 at 11:44
@NikosParaskevopoulos Sorry I forgot to add that into the example, it shows the error with this in the dependency list. — ngplayground
– ngplayground, Commented Jun 18, 2014 at 11:45
OK; there is something really fishy here. This code should work. Can you reproduce the problem in a fiddle/plunk? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 18, 2014 at 12:02
How did you finally resolve this issue? I'm having the same problem and the answer marked below isn't working. I have the order correctly in place — nikjohn
– nikjohn, Commented Jul 8, 2015 at 22:52

domakas · Accepted Answer · 2014-06-18 11:56:26Z

25

When you are using

app.controller('myController', ['$scope', '$http', '$filter', function($scope, $filter, $http) {

variable $filter is actually a instance of $http, and $http is instance of $filter. Actually it doesn't matter what is written in function(...) params.

What is important here, is the order of injectibles you are using, for example

app.controller('myController', ['$scope', '$http', '$filter', function(a, b, c) {

will map to instances:

a -> scope
b -> $http
c -> $filter

From angular docs:

Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

So by using array notation for yout controller, you are making sure that code will work after code is minified.

answered Jun 18, 2014 at 11:56

domakas

1,2468 silver badges9 bronze badges

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

1 Comment

SeanMC Over a year ago

while not the exact scenario, conflicting with http, I still found that changing the order fixed my issue

Gajender Singh · Accepted Answer · 2017-01-31 10:22:40Z

2

add filter after http and angular version also defends how you are going to use filter.

     plateFormController.$inject = ['$scope', '$http',
    '$filter','$timeout', '$q', '$mdSidenav', '$log'];



function plateFormController($scope, $http,$filter, $timeout, $q) {
          jsonByName=$filter('filter')($scope.json, { name: 'a' });
        }

answered Jan 31, 2017 at 10:22

Gajender Singh

1,31314 silver badges13 bronze badges

Comments

Ravi · Accepted Answer · 2017-11-28 12:29:03Z

0

In my case, expected data List object is null, by ensuring that expected List Object not null. I am able to avoid this error.

answered Nov 28, 2017 at 12:29

Ravi

157 bronze badges

Collectives™ on Stack Overflow

$filter is not a function AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related