Call a function declared in a custom angular filter

Question

I'm trying to call a declared function from my filter module:

filterModule.filter({
    functionFilterOne: ['CustomService', functionIDOne],
    functionFilterTwo: ['CustomService', functionIDTwo],   
});

    function functionIDOne(id) {
      return function(id) {
       return id + "PREFIXOne";
      }
    }
    function functionIDTwo(id) {
      return function(id) {
       return id + "PREFIXTwo";
      }
    }

In html :

{{  elet.id | functionFilterOne: functionIDOne}}

I would like to create a generic filter module for the app that containe many filter.

I don't know how to call it correctly in my html, any idea. I got the error :

angular.js:13283 Error: [$injector:unpr] Unknown provider: functionFilterOneProvider <- functionFilterOne<-

I followed the links Link for separate filter and link filter with many function

JLRishe · Accepted Answer · 2017-10-25 11:09:11Z

1

Your attempt at creating multiple filters doesn't look anything like the answer you linked to.

This is what creating filters looks like:

filterModule.filter('functionFilterOne', ['CustomService', functionIDOne])
            .filter('functionFilterTwo', ['CustomService', functionIDTwo]);

You've also made it impossible to use your custom service by shadowing it with the filter's parameter. Use different parameter names:

function functionIDOne(customService) {
  return function(id) {
    return id + "PREFIXOne";
  }
}

edited Oct 25, 2017 at 11:09

answered Oct 25, 2017 at 10:53

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

selma Over a year ago

Just another issue , i tried to call a method in CustomService from the functionIDOne function and i got an error that CustomService is not defined, how can pass this service to my function?

JLRishe Over a year ago

@selma It's probably because you are shadowing the function parameter that contains the service. Use different parameter names (see the update to my answer).

selma Over a year ago

thx worked very well , can i ask you an other question, when i called the service with customService.getNameById(id).then(function(rslt){ console.log( rslt.name); return rslt.name; }); console.log print the name but arriving in html empty, have you an idea?

JLRishe Over a year ago

@selma Did you remember to put a return at the beginning of that?

selma Over a year ago

yes i added it like this:function functionIDOne(customService) { return function(id) { return customService.getNameById(id).then(function(rslt){ console.log( rslt.name); return rslt.name; }); } } and it return '{}' but in console there is the name, in htnl is {{ elmt.id | getNameById}}

|

Pradip Talaviya · Accepted Answer · 2017-10-25 11:16:18Z

1

just simple

AppModule.filter('addprifix', function () {
    return function (input)
    {
        return input + "PREFIXOne";
    }
});

Use like ng-model="id|addprifix"

answered Oct 25, 2017 at 11:16

Pradip Talaviya

4092 gold badges9 silver badges23 bronze badges

2 Comments

selma Over a year ago

yes you are rigth, i want to have one module that containes many functions and each functions are declared with a specific services.

Pradip Talaviya Over a year ago

than AppModule Replace with your module and declare custom filter

Collectives™ on Stack Overflow

Call a function declared in a custom angular filter

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related