AngularJS 1.x 自定义过滤器无法注入，未知提供者 [英] AngularJS 1.x custom filter can't be injected, unknown provider

问题描述

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

I'm trying to create a custom filter, but when I try to inject it into my controller, I get an 'Unknown provider' error. I have checked and double checked all the references, but I can't see what's wrong.

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

I know that the file is referenced in my index.html correctly, it is loaded and can be found by the inspector. This is the code I have:

在我的 app.js 中:

In my 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) {

  });

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

Of course this is quite simplified, but it just doesn't work, and I can't see why. I have made several services and they all work and play along nicely.

推荐答案

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

You don't need to inject the filter itself.

此代码...

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

  });

应该是

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

  });

在 CourseCtrl 中，您应该像往常一样使用过滤器.

And inside CourseCtrl you should use your filter as you normally do.

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

Injecting the module 'equiclass.filters' into your module 'equiclass.controllers' is enough.

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

I had a similar issue and made a post about it on my blog.

--编辑

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

As n00dl3 mentions below the tricky part is how the auto-naming convention works in Angular. If you name your filter specialNumberFilter then when you inject it you need to refer to it as specialNumberFilterFilter. This allows you to use the filter as a function, which is what it is.

//在控制器中vm.data = specialNumberFilterFilter(vm.data, 'a');

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

But I believe you can also use the filter without injecting it into a controller if it is used in a string expression that is being evaluated by, say, a watch because this would be the same as the scenario when you are using it in a template.

//在手表内部 - 不需要控制器注入`$scope.$watch('vm.data | specialNumberFilter', function(new, old) { ... })`

这篇关于AngularJS 1.x 自定义过滤器无法注入，未知提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！