AngularJS替换对象后丢失对象属性监听的解决方法

这个场景我太熟悉了！当你直接把$scope.data整个替换成新对象时，AngularJS的绑定机制就会“懵圈”——因为原来的ng-repeat绑定的是旧data对象里的portfolios引用，你把data换成新对象后，旧引用已经失效，视图自然不会更新。下面给你几个靠谱的解决办法：

方案一：只更新需要的属性（推荐） #

不要替换整个data对象，而是直接更新它的portfolios属性，这样能保持$scope.data的引用不变，Angular的脏检查能自动检测到数组变化：

$scope.data = {}; 
$scope.data.portfolios = [ { Name: "aaa" }, { Name: "bbb" } ]; 

$scope.portfoliosService.loadPortfolios(clientId, true, true)
  .success(function (response) {
    // 只更新portfolios属性，保留data对象的原有引用
    $scope.data.portfolios = response.data.portfolios;
  });

方案二：用angular.copy合并新数据到旧对象 #

如果response.data里还有其他需要同步的属性，不想一个个手动更新，可以用angular.copy把新数据的内容复制到旧的data对象中，这样既保留了原引用，又同步了所有属性：

$scope.data = {}; 
$scope.data.portfolios = [ { Name: "aaa" }, { Name: "bbb" } ]; 

$scope.portfoliosService.loadPortfolios(clientId, true, true)
  .success(function (response) {
    // 把新数据复制到旧data对象，保持引用不变
    angular.copy(response.data, $scope.data);
  });

方案三：手动触发脏检查（不推荐，仅特殊场景用） #

如果因为某些原因必须替换整个data对象，可以手动调用$scope.$apply()强制Angular触发脏检查，更新视图。不过要注意，这种方法容易引发“digest already in progress”的错误，所以优先用前两种：

$scope.data = {}; 
$scope.data.portfolios = [ { Name: "aaa" }, { Name: "bbb" } ]; 

$scope.portfoliosService.loadPortfolios(clientId, true, true)
  .success(function (response) {
    $scope.data = response.data;
    // 手动触发脏检查
    $scope.$apply();
  });

另外还要提一句，你的HTML里绑定的是portfolio.name（小写n），但JS里初始数据是Name（大写N），要注意字段名大小写一致，不然视图里会显示空值哦！

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