How can use a filter in my AngularJS precisely on an ng-bind?

Question

I tried to use this simple filter :

App.filter('MyCutFilter', function ()
{
    return function(input)
    {
        return input.replace(/^.*[\\\/]/, '');
    };
})

On a element of ng-repeat like this :

<tr ng-repeat="jf in ctrl.Files" class="tablerow">
    <td><span ng-bind="jf.id"></span></td>
    <td><span class="filename" ng-bind="jf.FileName | MyCutFilter"></span></td>

But i got the following error :

Error: [$injector:unpr] Unknown provider: CutFilterProvider <- CutFilter <- UpFileController

What can i do to correct it ?

Thanks for your help in adavance.

How do you use this filter? And `MyCutFilter` is not the same as `CutFilter` - you realize this, do you? — dfsq, May 30 '16 at 14:17
https://docs.angularjs.org/error/$injector/unpr may be there is an error in dependency injection... — swarnava112, May 30 '16 at 14:20
@SwarnavaSarkar Thanks, i already checked it but i will recheck, we never know. — Sanzensekai, May 30 '16 at 14:46

score 0 · Answer 1 · answered May 30 '16 at 17:06

0

Looking at the error,

Error: [$injector:unpr] Unknown provider: CutFilterProvider <- CutFilter <- UpFileController

It looks like you are trying to inject Cutfilter in a controller named UpFileController. Please, remove the Cutfilter injection from UpFileController.

answered May 30 '16 at 17:06

Saad

942
6
15

Thanks for this advice. – Sanzensekai Jun 06 '16 at 14:36

score 0 · Accepted Answer · answered Jun 06 '16 at 14:46

finally i created my own service like this :

'use strict';

App.factory('UtilsService', [function(nameTable){

    return {
               parseTheseNames: function ParseThesesNames(nameTable){
                    for (var i=0; i < nameTable.length; i++)
                    {
                        //console.log(d[i].upFileName); 
                        nameTable[i].upFileName = nameTable[i].upFileName.replace(/^.*[\\\/]/, '');
                        //console.log("obj " + d[i].upFileName);
                    }
            }
    };

}]);

And i am using it like this :

App.controller('FileController',[..., 'UtilsService',...,
function(..., UtilsService, ...){
.
.
.

function(d){
    UtilsService.parseTheseNames(d);
    self.upFiles = d;
}
.
.
.

I changed what i wanted to get the return of the data directly from a callback to be able to parse the filename earlier.

Thanks for the help and the documentation.

How can use a filter in my AngularJS precisely on an ng-bind?

2 Answers2