Question

浏览器控制台显示$ scope.counter递增但为什么页面递增？

显示＆＃34; counter = 100 ＆＃34;所以我知道绑定工作一次，但随后计时器点火时不会（101,102，...）：

<!DOCTYPE html>
<html ng-app="bindInterval">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script>
    angular.module('bindInterval', [])
      .controller('bindIntervalController', ['$scope', function($scope) {
        $scope.counter = 100;
        window.setInterval(function() {
          $scope.counter += 1;
          console.log($scope.counter);
        }, 1000);
      }]);
  </script>
</head>
<body><div ng-controller="bindIntervalController">counter={{counter}}</div></body>
</html>

代码Plunker

我用谷歌搜索了这个，但他们只显示不同的{{:: name}}。

Answer 1

因为setInterval没有触发摘要周期。您需要使用Angular提供的$interval模块：

angular.module('bindInterval', [])
  .controller('bindIntervalController', ['$scope', '$interval' function($scope, $interval) {
    $scope.counter = 100;
    $interval(function() {
      $scope.counter += 1;
      console.log($scope.counter);
    }, 1000);
  }]);

Answer 2

不要在angularjs中使用setInterval因为angular不会看到这种变化。请改用$interval。

Angular ng-bind仅绑定一次

2 个答案: