Javascript AngularJS - $filter 未定义

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31986801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:28:18  来源:igfitidea点击:

AngularJS - $filter is not defined

javascriptangularjs

提问by Michael Giovanni Pumo

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!

帮助表示赞赏!

回答by Brocco

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

to的第二个参数[module].controller是构造函数,不是调用构造函数...

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

回答by CoreyGrant

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.

你的控制器函数(你当前有一个函数调用,而不是回调函数)需要是一个接受 $scope 的函数(控制器需要 $scope),也包含 $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 并调用

$filter('slug')(inputStuff)

or you can inject slugFilter and just call it directly

或者你可以注入 slugFilter 并直接调用它

slugFilter(inputStuff)

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

关于 angular 最常见的抱怨之一是错误消息,这似乎是这里的问题!

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

如果我对任何事情不够清楚,请告诉我,我会尽力提供帮助。

回答by Tyler.z.yang

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

我认为当您尝试定义控制器并注入$filter到您的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.

通过这种方式,您可以调用该函数app.graduateCalculator($filter)。但是js解释器不知道是什么$filter,所以抛出了异常。

Just update your controller into this,

只需将您的控制器更新为这个,

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

And make sure your graduateCalculatorhave the parameter $filter.

并确保你graduateCalculator有参数$filter

回答by MoLow

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