AngularJS：ng-repeat未随数组清空及补全更新的问题求助

这个场景我太熟悉了——异步修改数据后，$watch触发了但视图就是不更新，手动$apply还报错，简直让人头大。咱们一步步来搞定它：

核心原因分析 #

你遇到的问题本质上是脏检查时机的冲突：

• 你的$watch本身就在Angular的digest循环里执行，这时候直接修改vm.palette，Angular已经完成了当前轮次的脏检查，不会立刻重新检测这个变量的变化。
• 手动调用$scope.$apply()会报错，因为此时digest循环已经在进行中了。

解决方案1：用$timeout延迟修改（最稳妥） #

把数组补全的逻辑放到$timeout里，它会自动在当前digest结束后启动一个新的digest循环，既不会触发冲突，又能让Angular检测到数组变化并更新视图。记得要在控制器里注入$timeout哦。

修改后的$watch代码：

vm.$watch('palette', newVal => {
  console.log('caught change');
  if(newVal.length < 8) {
    $timeout(() => {
      const fillArr = new Array(8 - newVal.length);
      fillArr.fill('');
      vm.palette = vm.palette.concat(fillArr);
      console.log('after fill', vm.palette);
    });
  }
}, true);

解决方案2：修改原数组而非替换（更高效） #

Angular对数组的变化检测，既会监听引用变化，也会监听内容变化。你原来的代码用concat生成了新数组并替换原变量，不如直接修改原数组的内容（比如用push），这样Angular的脏检查能直接捕捉到内容变化，无需额外操作：

vm.$watch('palette', newVal => {
  console.log('caught change');
  const needFillCount = 8 - newVal.length;
  if(needFillCount > 0) {
    for(let i = 0; i < needFillCount; i++) {
      vm.palette.push('');
    }
    console.log('after fill', vm.palette);
  }
}, true);

额外优化：简化清空逻辑 #

你清空调色板时，没必要先set再get，直接赋值空数组给vm.palette即可，$watch会自动触发补全逻辑：

vm.clearEntirePalette = () => {
  $localForage.setItem('palette', [])
  .then(() => {
    vm.palette = []; // 直接赋值，省去一次get请求
  });
};

这样调整后，ng-repeat应该就能正确反映数组的变化啦。

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