未知提供程序：正确注入过滤器仍然会引发错误

Question

我不明白最新情况，所以我希望你能帮助我。

问题是什么？

我在我的模块中创建了一个过滤器，注入了它（无法找到任何拼写错误或类似内容），Chrome控制台会抛出错误：Unkown Provider。

我的代码

angular.module('Prizeplay.Lobby.Browser', ['ui.router', 'ui.bootstrap']);
angular.module('Prizeplay.Lobby.Browser')
    .filter('tournamentFilter', [function() {
        return function(input, filter) {
            console.log('tournamentFilter: Success!');
            return input;
        };
    }])
    .directive('appTournamentBrowser', [function() {
        return {
            restrict: 'E',
            replace: true,
            controller: ['$scope', 'tournamentFilter', 'filterService', function($scope, tournamentFilter, filterService) {

                $scope.activeRow = null,

                    $scope.tournaments = [];

                $scope.$on('filter:changed', function(event, currentFilter) {
                    //this works perfectly :)
                    $scope.tournaments = $filter('tournamentFilter')($scope.tournaments, currentFilter);
                    //this does not work :(
                    $scope.tournaments = tournamentFilter($scope.tournaments, currentFilter);
                });

                $scope.setRow = function(id) {
                    $scope.activeRow = id;
                };

            }],
            templateUrl: 'lobby/browser/tournament-browser.tpl.html'
        };
    }]);

我尝试了什么？ 1小时后，我放弃了搜索任何注射错误并询问谷歌。 Google在Stackoverflow上向我展示了this topic。我阅读了BKM的评论并试了一下。嗯......出于某种原因，它有效。

但是使用我的$filter过滤器对我来说是错误的。为什么我不能按开发者指南给我的方式去做？

Answer 1

解决方案非常简单。注入过程是注入模块，而不是其他定义点。在注入过滤器的任何示例中，它们是在不同模块中定义的过滤器。不能/不应该注入当前模块中定义的任何内容。

例如，在Angular.js phonecat app：

中

angular.module('phonecatFilters', []).filter('checkmark', function() 
....

angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters'])

为了使用此过滤器，会注入phonecatFilters模块，而不是checkmark过滤器。