【问题标题】：AngularJS 1.x custom filter can't be injected, unknown providerAngularJS 1.x 自定义过滤器无法注入，未知提供者
【发布时间】：2014-05-31 01:58:34
【问题描述】：

我正在尝试创建一个自定义过滤器，但是当我尝试将其注入我的控制器时，我收到“未知提供程序”错误。我已经检查并仔细检查了所有参考资料，但我看不出有什么问题。

我知道该文件在我的 index.html 中被正确引用，它已加载并且可以被检查器找到。这是我的代码：

在我的 app.js 中：

angular.module('equiclass', ['equiclass.controllers',
                         'equiclass.services',
                         'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
  .when('/courses', {
    templateUrl: 'views/courses.html',
    controller: 'CourseCtrl'
  // And some other stuff with routes
});

angular.module('equiclass.controllers', ['equiclass.services', 'equiclass.filters']);
angular.module('equiclass.services', []);
angular.module('equiclass.filters', []);

我的过滤器：

angular.module('equiclass.filters')
  .filter('testFilter', function() {
    return function(input) {
      return undefined;
    };
});

还有控制器：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

当然，这是相当简化的，但它不起作用，我不明白为什么。我已经提供了几项服务，它们都可以很好地工作和玩耍。

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

如果你想在控制器中使用过滤器，你必须将$filter 属性注入你的控制器并且可以像访问它一样

$filter('filtername');

你可以用like

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

【讨论】：

【解决方案2】：

您不需要注入过滤器本身。

这段代码...

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

应该是

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope) {

  });

在CourseCtrl 中，你应该像往常一样使用你的过滤器。

将模块'equiclass.filters'注入你的模块'equiclass.controllers'就足够了。

我有一个类似的问题，并在on my blog发了一个帖子。

--编辑

正如n00dl3 在下面提到的，棘手的部分是自动命名约定在 Angular 中的工作方式。如果您将过滤器命名为specialNumberFilter，那么当您注入它时，您需要将其称为specialNumberFilterFilter。这允许您将过滤器用作函数，它就是这样。

// In a controller vm.data = specialNumberFilterFilter(vm.data, 'a');

但我相信，如果它用于正在由手表评估的字符串表达式中，您也可以使用过滤器而不将其注入控制器，因为这与您使用它时的场景相同在模板中。

// Inside a watch - no controller injection required `$scope.$watch('vm.data | specialNumberFilter', function(new, old) { ... })`

【讨论】：

其实这还不够，根据angular的文档，如果你想在你的控制器中使用过滤器，你确实需要注入过滤器，你应该像这样注入它： controller('MyController', ['<filter name>Filter', function(<filter name>Filter) {}]);RTFM
博客链接似乎已损坏/断开。

【解决方案3】：

根据 Angular 的文档：

如果您想在模板中使用过滤器

那么您只需将其注入您的模块中，然后像 {{ expression | filter }} 或 {{ expression | filter:argument1:argument2:... }} 一样使用它。

doc

如果你想在控制器、指令和东西中使用你的过滤器：

注入一个名为 <filterName>Filter 的依赖项，如下所示：

controller('MyController', ['filterFilter', function(filterFilter) {}]);

doc

所以对于这个特殊情况：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilterFilter) {

  });

【讨论】：

【解决方案4】：

您没有提到它是在生产中还是在本地服务器上，但以防万一您要缩小文件，试试这个：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', ['$scope', 'testFilter', function ($scope, testFilter) {

  }]);

【讨论】：