javascript - AngularJS - $filter is not defined - Stack Overflow

admin管理员组

文章数量:1187345

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!

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!

• javascript
• angularjs

Share Improve this question Follow edited Aug 13, 2015 at 11:35 Michael Giovanni Pumo asked Aug 13, 2015 at 11:22 Michael Giovanni PumoMichael Giovanni Pumo 14.8k1818 gold badges9999 silver badges145145 bronze badges 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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]);

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.

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.

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

本文标签： javascriptAngularJSfilter is not definedStack Overflow