未知的提供者：过滤器被正确注入，仍然抛出错误

Question

我不明白发生了什么，所以希望你能帮助我。

什么问题？

我在我的模块中创建了一个过滤器，将其注入（找不到任何拼写错误或类似内容），Chrome 控制台抛出 ans error: 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 过滤器。