AngularJs中$ interval和setInterval之间的区别

Question

我试图了解$ interval和setInterval之间的区别。我有这个测试：

Dashboard.prototype.updateTotalAppointments = function(){
//console.log();
this.appointmentsCount = this.appointmentsCount +1;
console.log(this.appointmentsCount);
};

Dashboard.prototype.start = function(){
    setInterval(function(){
        this.updateTotalAppointments();
    }.bind(this), 3000);
}

div class="hb-info-card-data-count"><h1>{{dashCtrl.appointmentsCount}}</h1></div>

使用 setInterval 不会更新HTML页面上的值，但实际上该值在浏览器控制台上会更改，但不会在HTML页面上更新。

但是如果我这样做：

Dashboard.prototype.start = function(){
$interval(function(){//using $interval seems to work fine
    this.updateTotalAppointments();
}.bind(this), 3000);

}

这似乎工作得很好，所以我真的不知道为什么后者不起作用，但是我真的很想知道。

同样，从后台不断请求数据的最佳方法是每隔n分钟说一次并通过其控制器更新页面。

Answer 1

$
interval
是Angular对本机Javascript
setInterval的包装。

当$interval使用时，角意识到由间隔功能所做的任何范围的变化，和双向绑定反映了变化。

当setInterval使用时，角不会意识到由setIntervalhtml" target="_blank">函数所做的任何范围的变化。

简而言之，该$interval函数触发Angular的摘要循环，而setInterval不会触发。

这个笨拙的人展示了差异。

码：

angular.module('DemoApp', [])
  .controller('IntervalCtrl', function($scope, $interval) {


    var updateExampleText = function() {
      console.log('Changing exampleText');
      $scope.exampleText = 'Time: ' + new Date().getSeconds();
    };

    $scope.useInterval = function() {
      //Show current seconds value 5 times after every 1000 ms
      $interval(updateExampleText, 1000, 5);

    };

    $scope.useSetInterval = function() {
      //$scope.exampleText changes are not reflected in the page
      //because Angular is not aware of the changes.
      setInterval(updateExampleText, 1000);
    };
  });