Unknown provider for custom filter Ionic/AngularJS

Question

I'm trying to implement a custom filter, but I get the following error:

Error: [$injector:unpr] Unknown provider: removeCharsFilterProvider <- removeCharsFilter

The structure of my project is as follow...

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>

I have no idea why this is happening, As far as I know this is supposed to work. Can you see anything that I'm missing?

did you try add your filter to as dependency in app.js file? like this: var app = angular.module('myApp', ['ionic', 'removeChars']) — Furkan Başaran
@Daedalus very well spotted! However after fixing that I still get the same error... — user818700

Anand G Anand G · Accepted Answer · 2015-10-27T08:07:59

First of all, you don't need to inject filters in the controller, They are the part of the main app and can be used using $filter service in any controller.

Filters are not independent singleton objects hence no need to include as a dependency.

Since you have added it to the controller, it is looking for service or factory which are a singleton and hence needs to inject. but in your case, you have a filter, not service.

First remove removeChars from controller. it's giving you $injector error because it is looking for service or factory which is not there. Use bleow way if you want to use filters in controllers .

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);

  }
]);

If you want to use a filter in view, no need to manage its dependency, directly use in view like the way you are using.

Hence conclusion is,

Filters can not be loaded as dependency for controller since they are not singleton.
Filter can be used in controller using $filter
In view, they can applied on data directly using | pipe separator

Hope this helps!

Unknown provider for custom filter Ionic/AngularJS

2 Answers