AngularJS 1.x custom filter can't be injected, unknown provider

Question

I\'m trying to create a custom filter, but when I try to inject it into my controller, I get an \'Unknown provider\' error. I have checked and double checked all the references,

Answer 1

You don't need to inject the filter itself.

This code...

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

Should be

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope) {

  });

And inside CourseCtrl you should use your filter as you normally do.

Injecting the module 'equiclass.filters' into your module 'equiclass.controllers' is enough.

I had a similar issue and made a post about it on my blog.

--Edit

As n00dl3 mentions below the tricky part is how the auto-naming convention works in Angular. If you name your filter specialNumberFilter then when you inject it you need to refer to it as specialNumberFilterFilter. This allows you to use the filter as a function, which is what it is.

// In a controller vm.data = specialNumberFilterFilter(vm.data, 'a');

But I believe you can also use the filter without injecting it into a controller if it is used in a string expression that is being evaluated by, say, a watch because this would be the same as the scenario when you are using it in a template.

// Inside a watch - no controller injection required `$scope.$watch('vm.data | specialNumberFilter', function(new, old) { ... })`

Answer 2

If you want to use filter inside a controller you have to inject $filter attribute to your controller and can access it like

$filter('filtername');

You can use like

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

Answer 3

you didn't mention if it's in production or on a local server, but just in case you are minifying your files, try this:

angular.module('equiclass.controllers')
  .controller('CourseCtrl', ['$scope', 'testFilter', function ($scope, testFilter) {

  }]);

Answer 4

According to Angular's documentation :

if you want to use your filter in a template

then you just need to inject it in your module and then use it like this {{ expression | filter }} or {{ expression | filter:argument1:argument2:... }} .

doc

if you want to use your filter in a controller, directive, and stuffs :

inject a dependency with the name <filterName>Filter, like this :

controller('MyController', ['filterFilter', function(filterFilter) {}]);

doc

so for this particular case :

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilterFilter) {

  });