未知的自定義過濾器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. 在視圖中，他們可以使用|直接應用於數據 管道分離器

希望這可以幫助！

Answer 2

你有這個錯誤，因為你以錯誤的方式使用$ injector，根據AngularJS的DI文檔，當你需要在視圖之外的過濾器時，你必須在你的依賴項上附加Filter后綴，這告訴$注射器，你需要一個過濾器！

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

注入過濾器的另一種方法，如前面的注釋中所述，是請求過濾器到$ filter服務。