AngularJS - $filter is not defined

Question

I am trying to inject a filter into my controller and use it as such:

angular
    .module('graduateCalculator', [])
        .filter('slug', function() {
                return function(input) {
                    if(input) {
                        return input.toLowerCase().replace(/[^a-z-]/g, '-');
                    }
                };
        }).controller('GraduateCalculatorController', ['$filter', app.graduateCalculator($filter)]);

However, I get the above error. I am obviously doing something very wrong - just not obvious enough to me.

Uncaught ReferenceError: $filter is not defined

It may have something to do with my function. It's written like so:

var app = {

    graduateCalculator: function($filter) {
        window.console.log( $filter('slug')('A random looking string...') );
    }

};

Help appreciated!

Brocco · Accepted Answer · 2015-08-13 11:29:20Z

16

The 2nd parameter to [module].controller is a constructor function, not calling the constructor function...

// change this...
.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator($filter)]);
// to this...
.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator]);

answered Aug 13, 2015 at 11:29

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

Comments

CoreyGrant · Accepted Answer · 2015-08-13 11:34:30Z

8

You controller function (for which you currently have a function call, instead of a callback function) needs to be a function which takes $scope (controllers require $scope), also containing $filter.

controller('GraduateCalculatorController', ['$scope', '$filter', function($scope, $filter){<your code here>}]);

There are, however, two ways to use your filter. You can either inject $filter and call

$filter('slug')(inputStuff)

or you can inject slugFilter and just call it directly

slugFilter(inputStuff)

One of the most common complaints about angular is the error messages, and this seems to be the problem here!

If I wasn't clear enough on anything let me know and I'll do my best to help.

answered Aug 13, 2015 at 11:34

CoreyGrant

4421 gold badge4 silver badges16 bronze badges

Comments

Tyler.z.yang · Accepted Answer · 2015-08-13 11:31:49Z

3

I think error happen when you try to define a controller and inject $filter into your app.graduateCalculator($filter).

With this way you invoke the function app.graduateCalculator($filter). But the js interpreter didn't know what is $filter, so it threw the exception.

Just update your controller into this,

.controller('GraduateCalculatorController', ['$filter', app.graduateCalculator]);

And make sure your graduateCalculator have the parameter $filter.

answered Aug 13, 2015 at 11:31

Tyler.z.yang

2,4601 gold badge21 silver badges31 bronze badges

Comments

MoLow · Accepted Answer · 2015-08-13 11:29:49Z

1

you should wrap your contorller with a function

angular.module('graduateCalculator', [])
    .filter('slug', function() {
            return function(input) {
                if(input) {
                    return input.toLowerCase().replace(/[^a-z-]/g, '-');
                }
            };
    })
    .controller('GraduateCalculatorController', ['$filter', function($filter) {
        app.graduateCalculator($filter)
    }]);

answered Aug 13, 2015 at 11:29

MoLow

3,0642 gold badges23 silver badges41 bronze badges

2 Comments

Michael Giovanni Pumo Over a year ago

This appears to remove the error...but my app no longer works.

Michael Giovanni Pumo Over a year ago

True true. It would distract from the original question for me to have gone into detail why it didn't work. But I appreciate your suggestion. It led me to the answer that this parameter should be a constructor function, not a function call.

Collectives™ on Stack Overflow

AngularJS - $filter is not defined

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related