角度：过滤器中的无限摘要循环

小编典典

角度：过滤器中的无限摘要循环

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（无限摘要）循环。

我在理解为什么会发生这种情况以及如何解决此问题时遇到了一些麻烦。如果我理解正确，这是由于该函数调用了5个以上摘要操作。但是输入仅由过滤器调用一次，对吗？

任何帮助表示赞赏。

阅读 210

2020-07-04

共1个答案

小编典典

由于摘要将继续运行，直到达到模型的一致状态或将运行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('');
    }
  });

您可以使用seed参数来更改算法。例如，它可以是$index的ngRepeat

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

2020-07-04