angularjs - Angular : infinite digest loop in filter

Question

我正在编写一个自定义的 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 个以上的摘要操作。但是输入只被过滤器调用一次，对吧？

任何帮助表示赞赏。

Answer 1

问题是过滤器每次被调用都会产生一个新的结果，而 Angular 会多次调用它以确保值已经完成更改，但它永远不会改变。例如，如果您使用 uppercase过滤词 'stuff'那么结果是 'STUFF' .当Angular再次调用过滤器时，结果是'STUFF'再次，因此摘要循环可以结束。与返回 Math.random() 的过滤器形成对比。 ， 例如。

技术方案是在 Controller 而不是 View 中应用转换。但是，我更喜欢使用过滤器转换 View 中的数据，即使过滤器应用了像您这样的不稳定转换(每次返回不同)。

在大多数情况下，可以通过内存过滤器函数来修复不稳定的过滤器。下划线和 lodash 有一个 memoize功能包括在内。您只需将其包裹在过滤器函数中，如下所示:

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