angularjs – Angular：过滤器中的无限摘要循环

我正在编写一个自定义角度过滤器,随机大写传递给它的输入.

这是代码：

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;
  };
});

我这样称呼它是这样的：

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

它工作正常,但在我的控制台中我看到了一个rootScope：infdig(infinite digest)循环.

我很难理解为什么会这样,以及我可以做些什么来解决它.如果我理解正确,这是因为此函数调用了超过5个摘要动作.但输入只被过滤器调用一次,对吧？

任何帮助赞赏.

由于摘要将继续运行,直到达到模型的一致状态或将运行10次迭代,因此您需要自己的算法来生成伪随机数,这些伪随机数将为相同的字符串返回相同的数字,以避免无限的摘要循环.如果算法将使用字符值,字符位置和一些可配置种子来生成数字将是好的.避免在此类算法中使用日期/时间参数.这是一个可能的解决方案：

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('');
    }
  });

您可以使用种子参数来更改位算法.例如,它可能是ngRepeat的$index

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

原文地址：https://www.jb51.cc/angularjs/143621.html