window.setInterval（）在angular.js中无法正常工作

Question

我在angular.js控制器中使用了setInterval（）函数，以便稍后在UI上显示计时器。创建一个范围变量，其值以秒为单位不活动。

setInterval(function(){ scope.timer++ }, 1000);

它应该做的是，它应该每秒更新一次屏幕。但事实并非如此。有时它会在两秒钟，三秒钟之后更新屏幕，有时它会每秒更新一次，但它不一致。 而当我记录范围。计时器值，它表现正常。

这会是什么问题。 angular.js以某种方式限制本机javascript或什么？

Answer 1

最好是使用$interval，例如：

＆＃13;

＆＃13;

var app = angular.module('MyApp', []);

app.controller('AppCtrl', function($scope, $interval) {
    $scope.timer = 0;
    $interval(function() { $scope.timer++; }, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-bind="timer"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用范围。$ apply

setInterval(function(){ scope.timer++; scope.$apply(); }, 1000);

setInterval不是角度函数，因此范围不会刷新。

或使用角度服务（首选解决方案）：

$interval(function(){ scope.timer++;},1000);

Answer 3

可能是controller中的值正在更新，但DOM中没有 试试这个

<强> JS

setInterval(function(){ 
 scope.timer++ 
 setTimeout(function(){
   $scope.$apply();
 }, 1);
}, 1000);

或者您可以使用$interval并且您正在关注我的答案，您可以使用$timeout代替setTimeout

Answer 4

您应该使用$interval

将您的代码更新为此

$interval(function(){
    $scope.timer++;
}, 1000)

确保您的$scope.timer已正确初始化

Answer 5

setInterval不是角度函数，因此范围不会刷新，我不建议使用scope.$apply()作为其浪费。

使用angular的内置$interval方法：

.controller('ExampleController', ['$scope', '$interval',
  function($scope, $interval) {
      stop = $interval(function() {
          $scope.timer++;
      }, 1000);
});

文档：https://docs.angularjs.org/api/ng/service/ $ interval

Answer 6

您可以尝试使用docs

中的Angular $interval

您必须将其添加到您的控制器并使用它，例如this（查看Plunker）

app.controller('testController', ['$scope', '$interval', function($scope, $interval) {
  var count = 1;
  $scope.count = count;
  $interval(function() {
    $scope.count++;
  }, 1000);
}]);

Answer 7

setInterval是一个JS本机函数，要在摘要循环中执行它，你应该调用apply（）方法，或者使用AngularJS doc中建议的包装器$ interval。

$interval(function(){ scope.timer++ }, 1000);

https://docs.angularjs.org/api/ng/service/ $间隔