Dependency injection in custom filters

Question

I'm new to angular and trying create a custom filter which requires a service. I followed the answer here https://stackoverflow.com/a/43506252/15817005. It solved my issue partially.

Registering filter

angular.module('filters',[]).filter('dataFormat',['studentService', dataFormatFilter])

My Filter factory and filter function.

    export function dataFormatFilter(studentService){
console.log(studentService); // Having access here
return dataFormatFunction; 
}
 
function dataFormatFunction(name){
// All the formatting logic

//Need properties from studentService in this function.
}

I am able to access the properties from studentService in dataFormatFilter(factory function). Is there a way to get it in dataFormatFunction.

All the solutions i have seen use dataFormatFunction inside of factory itself dataFormatFilter. But i cannot follows this way.

Thanks!

Answer 1

What it looks like you need to to is return an arrow function that will keep the closure of your filter function so you can use the dependencies without having to pass them around. I wrote this plunkr to demonstrate.

The critical part being:

const dataFormatFilter = function (studentService) {
  return (name) => {
    return myReusableFunction(studentService, name);
  }
}

app.filter('dataFormat',['studentService', dataFormatFilter]);

Note that the returned value for the function is an arrow function. This isn't the only way to achieve what you are attempting, but should be the simplest.