Question

我正在尝试将一个过滤器注入我的控制器并使用它：

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

但是，我得到了上述错误。我显然做了一些非常错误的事情 - 对我来说不够明显。

Uncaught ReferenceError: $filter is not defined

这可能与我的功能有关。它是这样写的：

var app = {

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

};

帮助表示赞赏！

Answer 1

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

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

Answer 2

你的控制器函数（你当前有一个函数调用而不是回调函数）需要是一个需要$ scope（控制器需要$ scope）的函数，也包含$ filter。

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

但是，有两种方法可以使用过滤器。您可以注入$ filter并调用

$filter('slug')(inputStuff)

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

slugFilter(inputStuff)

关于角度最常见的抱怨之一是错误信息，这似乎是问题所在！

如果我对任何事情都不清楚，请告诉我，我会尽力帮助。

Answer 3

我认为当您尝试定义控制器并将$filter注入app.graduateCalculator($filter)时会发生错误。

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

只需将控制器更新为

即可

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

并确保您的graduateCalculator具有参数$filter。

Answer 4

你应该用一个函数

包装你的控制器

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

AngularJS - $ filter未定义

4 个答案: