AngularJS 1.x自定义过滤器无法注入，未知提供商

Question

我正在尝试创建自定义过滤器，但是当我尝试将其注入我的控制器时，我会得到一个“未知的提供商”＃39;错误。我检查并仔细检查了所有参考文献，但我看不出有什么错误。

我知道文件在我的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) {

  });

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

Answer 1

如果要在控制器中使用过滤器，则必须将$filter属性注入控制器并可以像

一样访问它

$filter('filtername');

您可以使用

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

Answer 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) { ... })`

Answer 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) {

  });

Answer 4

您没有提及它是在制作中还是在本地服务器上，但为了防止您缩小文件，请尝试以下操作：

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

  }]);