Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
tests
README.md
filterStabilize.js

README.md

Filter Stabilize

Fixes filters that cause infinite digest cycles and passes a copy of the input so that it can be directly modified.

Dependencies

  • memoize - Memoization prevents most infinite digest cycles.

The problem:

A filter used in the view triggers another digest cycle. If the filtered value isn't stable (returns differently each time), an infinite digest loop will occur.

Solutions:

The standard solution is to filter the data within the controller, thus avoiding the issue altogether. However, many people still find it nicer to be able to use unstable filters in the view.

The filterStabilize service stabilizes unstable filters by passing a copy of the arguments to the filter function and by memoizing the filter function. This prevents the original input from being modified and ensures that the filter outputs the same result given the same arguments.

Unstable filter:

.filter('myFilter', [
  function() {

    return function(input) {
      return Math.random();
    };

  }
])

Stabilized filter:

.filter('myFilter', [
  'pmkr.filterStabilize',
  function(stabilize) {

    return stabilize(function(input) {
      return Math.random();
    });

  }
])

Refiltering:

Because the service is caching results according to the input arguments, passing an arbitrary argument will yield a new result.

<!-- these two produce the same result -->
{{myData | myFilter}}
{{myData | myFilter}}
<!-- different result -->
{{myData | myFilter:anyValue}}

You can trigger a refilter by changing the arbitrary argument.

{{myData | myFilter:abitraryArg}}

$scope.refilter = function() {
  $scope.arbitraryArg = Math.random();
};

Parameters

filterFn

Type: Function

A function that transforms input.

You can’t perform that action at this time.