AngularJS自定义Filter返回对象触发[$rootScope:infdig]错误排查与解决

嘿，这个问题我之前在做AngularJS项目时也踩过坑，咱们一步步来理清楚原因和解决办法！

问题成因 #

AngularJS的**消化循环（Digest Cycle）**是用来检测绑定数据变化、更新视图的核心机制。它会反复检查所有绑定表达式的结果，直到连续两次检查结果一致（或者超过默认的10次上限），否则就会抛出[$rootScope:infdig]无限循环错误。

回到你的示例1：

• 你的greet过滤器每次执行都会返回一个全新的对象引用，哪怕对象的内容和之前完全一样（比如都是{ word: 'Hello world' }）。
• 组件的param用的是单向绑定<，AngularJS会对比每次绑定表达式obj | greet的结果引用：因为每次都是新对象，所以它会认为数据发生了变化，于是触发组件更新。
• 组件更新后，又会触发新一轮消化循环，过滤器再次执行并返回新对象，这个过程不断重复，直到超过循环上限，就抛出了错误。

那为什么示例2能正常运行？
这是因为示例2中，绑定表达式的输入是{ word: 'foo' }——这个对象字面量本身在每次消化循环里都会生成新引用，AngularJS会把整个表达式的结果（过滤器返回的新对象）视为“预期会变化”的内容。但关键是，过滤器返回的word值始终是Hello foo，当第二次消化循环检查视图中的{{$ctrl.param.word}}时，发现值没有变化，所以循环就停止了，不会触发上限报错。

可行的解决方案 #

根据你的需求，我整理了几种实用的解决办法：

1. 把过滤器改成返回值类型而非对象 #

如果你的场景只需要转换对象的某个属性，不如让过滤器直接返回字符串，避免创建新对象：

angular.module('app')
.filter('greet', function () {
  // 直接接收word属性，返回转换后的字符串
  return function (word) {
    return 'Hello ' + word;
  }
})

模板里这样用：

<my-comp param="{ word: obj.word | greet }" ></my-comp>

虽然每次还是会创建新的{ word: ... }对象，但因为word值稳定，AngularJS检测到视图内容不变后就会停止循环，不会报错。

2. 在组件内部处理数据转换（推荐） #

过滤器适合简单的视图层转换，而复杂的数据逻辑更适合放在组件内部。你可以去掉过滤器，改用组件的$onChanges钩子处理输入：

angular.module('app')
.component('myComp', {
  template: '<em>word: {{$ctrl.greetedWord}}</em>',
  bindings: { param: '<' },
  controller: function() {
    const ctrl = this;
    // 当param输入变化时，更新内部属性
    ctrl.$onChanges = function(changes) {
      if (changes.param && changes.param.currentValue) {
        ctrl.greetedWord = 'Hello ' + ctrl.param.word;
      }
    };
  }
})

模板里直接传递原始对象：

<my-comp param="obj" ></my-comp>

这种方式完全避免了新对象引用的问题，也更符合组件化的设计思想。

3. 给过滤器添加缓存（Memoization） #

如果一定要用过滤器，可以给它加缓存逻辑，只有当输入对象的关键属性变化时，才返回新对象，否则返回缓存的引用：

angular.module('app')
.filter('greet', function () {
  const cache = new Map();
  return function (object) {
    // 用对象的word属性作为缓存键
    const key = object.word;
    if (!cache.has(key)) {
      cache.set(key, { word: 'Hello ' + object.word });
    }
    return cache.get(key);
  }
})

这样，只要obj.word的值不变，过滤器就会返回同一个对象引用，AngularJS检测不到变化，自然不会触发无限循环。注意如果你的应用中有大量不同的word值，可以考虑定期清理缓存，避免内存泄漏。

4. 修改原始对象（不推荐） #

你可以让过滤器直接修改输入对象并返回它，这样引用不会变：

angular.module('app')
.filter('greet', function () {
  return function (object) {
    object.word = 'Hello ' + object.word;
    return object;
  }
})

但这种方法不推荐，因为过滤器应该是纯函数（不修改输入、相同输入返回相同输出），修改原始对象会污染父作用域的数据，导致不可预期的副作用。

内容的提问来源于stack exchange，提问作者czerny