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

Question

我正在尝试实现自定义筛选器,但是我收到以下错误:

错误:[$ injector:unpr]未知提供者:removeCharsFilterProvider < - 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);

  }
]);

如果要在视图中使用过滤器,则无需管理其依赖关系,直接在视图中使用,就像您使用的方式一样.

因此结论是,

1. 过滤器不能作为控制器的依赖项加载,因为它们不是单例.

2. 可以使用$ filter在控制器中使用过滤器

3. 在视图中,它们可以使用| 管道分隔器直接应用于数据

希望这可以帮助!