AngularJS 1.x custom filter cannot be entered, unknown provider

Question

I am trying to create a custom filter, but when I try to enter it into my controller, I get an "Unknown provider" error. I checked and double checked all the links, but I don’t see what is wrong.

I know that the file references my index.html correctly, it loads and can be found by the inspector. This is the code I have:

In my app.js app:

angular.module('equiclass', ['equiclass.controllers', 'equiclass.services', 'ngRoute']) .config(function ($routeProvider) { $routeProvider .when('/courses', { templateUrl: 'views/courses.html', controller: 'CourseCtrl' // And some other stuff with routes }); angular.module('equiclass.controllers', ['equiclass.services', 'equiclass.filters']); angular.module('equiclass.services', []); angular.module('equiclass.filters', []); 

My filter:

 angular.module('equiclass.filters') .filter('testFilter', function() { return function(input) { return undefined; }; }); 

And the controller:

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

Of course, this is pretty simplified, but it just doesn't work, and I don't understand why. I made several services, and they all work and play well.

Answer 1

You do not need to enter the filter itself.

This code ...

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

Must be

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

And inside CourseCtrl you should use your filter as usual.

Putting the module 'equiclass.filters' into your module 'equiclass.controllers' enough.

I had a similar issue and posted a post about this on my blog .

- Change

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

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

But I believe that you can also use a filter without entering it into the controller if it is used in a string expression that evaluates, say, for hours, because it will be the same as the script when you use it in the template.

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

Answer 2

If you want to use the filter inside the controller, you need to add the $filter attribute to your controller and get access to it, for example

 $filter('filtername'); 

You can use as

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

Answer 3

According to Angular documentation:

if you want to use your filter in the template

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

doc

if you want to use your filter in the controller, directive and materials:

enter a dependency named <filterName>Filter , for example:

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

doc

so for this particular case:

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

Answer 4

You did not specify whether it will be in production or on a local server, but just in case you are reducing your files, try the following:

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