Angular: infinite digest loop in filter

Question

I'm writing a custom Angular filter that randomly capitalizes the input passed to it.

Here's the code:

angular.module('textFilters', []).filter('goBananas', function() {
  return function(input) {

    var str = input;
    var strlen = str.length;

    while(strlen--) if(Math.round(Math.random())) {
      str = str.substr(0,strlen) + str.charAt(strlen).toUpperCase() + str.substr(strlen+1);
    }

    return str;
  };
});

I call it in my view like so:

    <a class='menu_button_news menu_button' ng-href='#/news'>
        {{"News" | goBananas}}
    </a>

It works, but in my console I'm seeing a rootScope:infdig (infinite digest) loop.

I'm having some trouble understanding why this is happening and what I can do to resolve it. If I understand correctly, this is due to the fact that there are more than 5 digest actions called by this function. But the input is only called once by the filter, right?

Any help appreciated.

Did you ever check out my answer? It it's not helpful at all, I'd like to delete it. However, I feel that it's very good information that we should be memoizing such filters to keep the data transformation separate from the logic that fixes the infinite digest error. The code is so much cleaner that way. I'd really appreciate your feedback. Note my solution doesn't involve changing your code, which works fine. — m59
– m59, Commented Oct 3, 2014 at 22:12

m59 · Accepted Answer · 2015-01-08 00:51:30Z

6

The problem is that the filter will produce a new result every time it is called, and Angular will call it more than once to ensure that the value is done changing, which it never is. For example, if you use the uppercase filter on the word 'stuff' then the result is 'STUFF'. When Angular calls the filter again, the result is 'STUFF' again, so the digest cycle can end. Contrast that with a filter that returns Math.random(), for example.

The technical solution is to apply the transformation in the controller rather than in the view. However, I do prefer to transform data in the view with filters, even if the filter applies an unstable transformation (returns differently each time) like yours.

In most cases, an unstable filter can be fixed by memoizing the filter function. Underscore and lodash have a memoize function included. You would just wrap that around the filter function like this:

.filter('myFilter', function() {
  return _memoize(function(input) {
    // your filter logic
    return result;
  });
});

edited Jan 8, 2015 at 0:51

answered Aug 14, 2014 at 18:59

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

2 Comments

codebased Over a year ago

can you please direct me what is wrong here- stackoverflow.com/questions/30435382/…

m59 Over a year ago

@codebased my answer here explains the problem you're having and the easiest solution. Wrap your filter in a memoize function.

Vadim · Accepted Answer · 2014-02-27 13:11:58Z

4

Since digest will continue to run until consistent state of the model will be reached or 10 iterations will run, you need your own algorithm to generate pseudo-random numbers that will return the same numbers for the same strings in order to avoid infinite digest loop. It will be good if algorithm will use character value, character position and some configurable seed to generate numbers. Avoid using date/time parameters in such algorithm. Here is one of possible solutions:

HTML

<h1>{{ 'Hello Plunker!' | goBananas:17 }}</h1>

JavaScript

angular.module('textFilters', []).
  filter('goBananas', function() {
    return function(input, seed) {
      seed = seed || 1;
      (input = input.split('')).forEach(function(c, i, arr) {
        arr[i] = c[(c.charCodeAt(0) + i + Math.round(seed / 3)) % 2 ? 'toUpperCase' : 'toLowerCase']();
      });
      return input.join('');
    }
  });

You can play with seed parameter to change a bit an algorithm. For example it may be $index of ngRepeat

Plunker: http://plnkr.co/edit/oBSGQjVZjhaIMWNrPXRh?p=preview

edited Feb 27, 2014 at 13:11

answered Feb 27, 2014 at 12:38

Vadim

8,7744 gold badges47 silver badges52 bronze badges

2 Comments

Squrler Over a year ago

Great, this works a charm. Wouldn't it just be possible to define $scope.random = Math.random()*10; in the controller and use the filter in the view as {{'Hey there' | goBananas:random}} ?

Vadim Over a year ago

@Squrler Yes, just take a look at this plunk plnkr.co/edit/ee0mRPMhfFsDZMzZv9iE?p=preview

Manuel Ebert · Accepted Answer · 2014-06-23 15:29:04Z

0

An alternative, if you want the behaviour to be truly random, is to do deal with the randomness only once during linking by creating a seed, and then use a seeded random number generator in the actual filter:

angular.module('textFilters', []).filter('goBananas', function() {
  var seed = Math.random()
  var rnd = function () {
    var x = Math.sin(seed++) * 10000;
    return x - Math.floor(x);
  }

  return function(input) {

    var str = input;
    var strlen = str.length;

    while(strlen--) if(Math.round(rnd())) {
      str = str.substr(0,strlen) + str.charAt(strlen).toUpperCase() + str.substr(strlen+1);
    }

    return str;
  };
});

answered Jun 23, 2014 at 15:29

Manuel Ebert

8,5595 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Angular: infinite digest loop in filter

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related