Question

大家好！

我的模型发生变化时，视图更新出现问题。

这是一个简单的例子：

我有返回对象实例的服务。此对象是我的应用程序的数据源。

我有与服务交互的控制器的指令。

问题是，正如我之前所说，当控制器更改服务中的数据时，这些更改不会出现在我的视图中。

我尝试通过在控制器代码中添加$ scope。$ apply（）来更新模型时强制进行视图更新：

$scope.click = () => {
  $scope.$apply(function() { 
    TestService.inc();
  });
  console.log(TestService);
};

但是这会导致错误：＆＃39;错误：[$ rootScope：inprog] $已经在进行中＆＃39;。我想，因为ng-click已经包括$ apply。

以下是我的代码。我做错了什么？

＆＃13;

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: {{counter}} <button ng-click=click($event)>count</button>',
        controller: ['$scope', 'TestService',
          function($scope, TestService) {
          console.log('> initialise the directive\'s controller');
            $scope.counter = TestService.counter;
            $scope.click = () => {
              TestService.inc();
              console.log(TestService);
            };
          }
        ],
      };
    }
  ])
;

＆＃13;

<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>

＆＃13;

AngularJS：当模型发生变化时，视图不会更新

0 个答案: