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

Question

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

我知道文件在我的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'就足够了.

我有类似的问题,并在我的博客上发了一篇关于它的帖子.

- 编辑

正如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) {

  });