Question

我试图实现自定义过滤器，但是我收到以下错误：

错误：[$ injector：unpr]未知提供者：removeCharsFilterProvider＆lt; - removeCharsFilter

我的项目结构如下......

app.js：

var app = angular.module('myApp', ['ionic'])

myController.js：

app.controller('myController', ['$scope', 'removeChars',
  function($scope, removeChars) {
    //...
  }
]);

removeCharsFilter.js：

app.filter('removeChars', function() {
  return function(input) {
    return input.replace(/-/g, '').replace(/>/g, '');
  };
});

myView.html：

<div ng-controller="myController">
 <p>{{person.name | removeChars}}</p>
</div>

的index.html

<!-- your app's js -->
<script src="js/app.js"></script>

<!-- filters -->
<script src="js/filters/removeCharsFilter.js"></script>

<!-- controllers -->
<script src="js/controllers/myController.js"></script>

我不知道为什么会发生这种情况，据我所知这应该有效。你能看到我遗失的任何东西吗？

Answer 1

首先，您不需要在控制器中注入过滤器，它们是主应用程序的一部分，可以在任何控制器中使用$filter服务。

过滤器不是独立的单件对象，因此不需要包括作为依赖。

由于您已将其添加到控制器，因此它正在寻找单个服务或工厂，因此需要注入。但在你的情况下，你有一个过滤器，而不是服务。

首先从控制器中删除removeChars。它给你$喷油器错误，因为它正在寻找不存在的服务或工厂。如果要在控制器中使用过滤器，请使用bleow方式。

app.controller('myController', ['$scope', '$filter',
   function($scope, $filter) {
   //use it like below if you  want to perform filters on data in controller
   $scope.someData = $filter('removeChars')(data);

  }
]);

如果您想在视图中使用过滤器，无需管理其依赖关系，请直接在视图中使用，就像您使用的方式一样。

因此结论是，

过滤器不能作为控制器的依赖项加载，因为它们不是单例。
可以使用$ filter
在视图中，他们可以使用|竖管分隔符直接应用于数据

希望这有帮助！

Answer 2

您已经收到此错误，因为您以错误的方式使用$ inject，根据{{3}}，当您需要在视图外部使用过滤器时，必须在依赖项上附加过滤器后缀，这会告诉$ injector您需要过滤器！

angular.module('test', []).controller('TestCtrl', function(dateFilter) { console.log('DateFilter is', dateFilter); });

如前面评论中所述，另一种注入过滤器的方法是请求过滤器使用 $ filter 服务。

未知的自定义过滤器Ionic / AngularJS提供商

2 个答案: