Question

26

Angularjs custom filter and dependency injection

rated 0 times [ 31] [ 5] / answers: 1 / hits: 28429 / 11 Years ago, sat, january 11, 2014, 12:00:00

I'm new to AngularJS and i see this syntax a lot:

function someFunc(){

   return function(input){

    return 'hello' + input;

  }

}

The function above is a general syntax i tend to see a lot but problem is specific with this example for custom filter:

angular.module('bookFilters', [])

    .filter('newBookFilter', function(){

          return function(input){

        return 'The Book: ' + input.name + 'is new !';

   };

});

I understand that wrapping the function with another function gives me an opportunity to use dependency injection, Here is my questions about it:

Does the filter get the function returned from the wrapping function? Then is it able to use dependency injection to inject the value into the function? Theoretically that:

This code:

{{bookObj | newBookFilter}}

Will become:

{{   bookObj | function(input){return 'The Book: ' + input.name + 'is new !'; }  }}

And finally the {{}} will return the final value from the function.

Why can't i just inject the input to the first function like:

angular.module('bookFilters', [])

         .filter('newBookFilter', function(input){

             return 'The Book: ' + input.name + 'is new !';

     });

Why dependency injection will only work on returned function?

I know i really confused here, If anyone can help me i will be very thankful, Thank you all and have a nice day.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 How to format date in v-Calendar?

Tue, Jul 28, 20, 00:00, 4 Years ago

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 11 Years ago peytont · Accepted Answer

I think of Angular factory, service, filter, directive wrappers as ovens that create JavaScript objects and functions with Angular flavors. So, to borrow the same style from Vasiliy's answer:

// Don't use this code in a real app. It's just to illustrate a point.

angular.module('App', [])



// The following oven makes an Angular flavored JavaScript function that 

// formats a currency

.service('currencyBadFilterFn',

  // We inject a built-in Angular filter, currencyFilter, into our oven

  function(currencyFilter) { 

    // oven produces a function that can be used in other places in Angular code

    return function(number) {

      // produced function returns a currency-formatted number when used

      return currencyFilter(number)   

    }

  }

)



.controller('MainCtrl',

  function($scope, currencyBadFilterFn) {

    $scope.amount = currencyBadFilterFn(10) // $10.00

  }

)

As you can see, the same pattern is used in creating services. Here, we are creating a service that returns a function that we can use in other places in our code.

The first function, the oven function, along with the .service or .factory or .filter wrapper, tells Angular how to build your function. The return value of that first function is what you will use in your code.