invoke-filter

invoke-filter

Status:

An optimization for calling pure functions in the template of an Angular application

Installation

You can get this via:

npm install --save invoke-filter

Then add the dependency to your project:

Using CommonJS

var yourApp = angular.module('yourModule', [
  require('invoke-filter');
]);

Using AMD

define(['invoke-filter'], function(invokeFilter) {
  var yourApp = angular.module('yourModule', [invokeFilter]);
});

Using Global

var yourApp = angular.module('yourModule', [invokeFilter]);

Usage

In your template, instead of doing this:

<div>{{vm.someFunctionOnYourController(vm.a, 'foo', vm.arg3)}}</div>

Do this:

<div>{{vm.someFunctionOnYourController | invoke:vm.a:'foo':vm.arg3}}</div>

Why is this better?

One benefit to using filters is that as of Angular 1.3, all filters are considered "stateless" (ie "pure functions") by default. This means that if the inputs don't change, then Angular wont call the filter. So if your controller function is a stateless function (returns the same output for a given input), then you can pass it to this invoke filter and your function will only be called when the inputs change.

This is definitely a performance optimization and I recommend you make certain that you really need it. This is likely most useful for functions that make complex computations or if you use it a lot (like in an ng-repeat).