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?

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?

• javascript
• angularjs
• filter
• ionic-framework

• 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 Commented Oct 27, 2015 at 7:51
• @Daedalus very well spotted! However after fixing that I still get the same error... – user818700 Commented Oct 27, 2015 at 7:53
• @FurkanBasaran That didn't work either... – user818700 Commented Oct 27, 2015 at 7:55
• everything looks fine. Can you create a plunker? – Tarun Dugar Commented Oct 27, 2015 at 7:56

2 Answers 2

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,

1. Filters can not be loaded as dependency for controller since they are not singleton.

2. Filter can be used in controller using $filter

3. In view, they can applied on data directly using | pipe separator

Hope this helps!

You've got this error because you're using the $injector in a wrong way, according to the D.I. documentation of AngularJS when you need for a filter outside from view you have to append the Filter suffix on your dependency, this tells the $injector that you need a filter!

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

Another way to $inject a filter, as described in the previous ments, is to request your filter to the $filter service.