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.

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

// In a controller 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.

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

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

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