AngularJS：模型变更后视图未更新问题排查

嘿，我来帮你搞定这个AngularJS视图不更新的问题～

首先咱们得弄明白问题出在哪：你现在是把TestService.counter这个数字值直接赋值给了$scope.counter，而数字属于原始类型，赋值的时候是做了一份拷贝，不是引用。所以就算你调用TestService.inc()修改了服务里的counter，$scope.counter还是原来那一份拷贝，视图自然不会跟着变。至于你加$scope.$apply()报错，确实是因为ng-click本身已经会触发Angular的digest循环了，手动再调用就会冲突，所以才会出现[$rootScope:inprog]的错误。

接下来给你几个解决办法，选一个适合你的：

方案1：直接绑定服务实例（最优雅） #

让$scope引用整个TestService实例，而不是单独的counter值。这样视图绑定的是服务实例上的counter属性，只要服务里的counter变了，Angular的digest循环就能检测到变化，自动更新视图。

修改控制器代码：

$scope.testService = TestService; // 把服务实例挂到scope上
// 移除原来的$scope.counter = TestService.counter;这一行

然后修改指令的模板：

template: 'counter: {{testService.counter}} <button ng-click="click($event)">count</button>',

这样不管你点哪个指令的按钮，两个指令的视图都会同步更新，因为它们共享同一个服务单例。

方案2：手动监听服务的counter变化 #

如果不想改模板的写法，可以用$scope.$watch来监听服务里counter的变化，一旦变化就更新$scope.counter：

在控制器里添加这段代码：

$scope.$watch(function() {
  // 每次digest循环都会执行这个函数，返回要监控的值
  return TestService.counter;
}, function(newVal) {
  // 当值变化时，更新scope上的counter
  $scope.counter = newVal;
});

方案3：点击时手动同步值 #

这个方法最简单但不够优雅，就是在click回调里手动把服务的counter值同步到$scope.counter：

$scope.click = () => {
  TestService.inc();
  $scope.counter = TestService.counter; // 手动更新scope的值
  console.log(TestService);
};

最后给你放一个方案1的完整可运行代码：

JavaScript代码

console.log('> load app.module.js');
class Test {
  constructor(n = 0) {
    console.log('> create a Test class instance');
    this.counter = n;
  }
  inc() {
    this.counter++;
  }
}
angular
  .module('app', [])
  .service('TestService', function() {
    console.log('> create the TestService');
    return new Test(42);
  })
  .directive('myTestDirective', [
    function() {
      console.log('> create the myTestDirective');
      return {
        restrict: 'E',
        template: 'counter: {{testService.counter}} <button ng-click="click($event)">count</button>',
        controller: ['$scope', 'TestService', function($scope, TestService) {
          console.log('> initialise the directive\'s controller');
          $scope.testService = TestService;
          $scope.click = () => {
            TestService.inc();
            console.log(TestService);
          };
        }],
      };
    }
  ]);

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
  <my-test-directive>...</my-test-directive>
  <my-test-directive>...</my-test-directive>
</body>

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