2016-08-04 29 views
1

我在angular.js控制器中使用了setInterval()函数来稍后在UI上显示定时器。创建一个范围变量,其值在几秒钟内处于非活动状态。window.setInterval()在angular.js中无法正常工作

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

它应该做的是,它应该每秒更新一次屏幕。但事实并非如此。有一段时间它会在两秒钟后更新屏幕,三秒钟,并且每秒更新一次,但不一致。 而我登录的范围。计时器值的行为正确。

这会是什么问题。 angular.js是否以某种方式限制原生JavaScript或什么? enter image description here

+0

有关其他参考:https://www.sitepoint.com/understanding-angulars-apply-digest/ –

回答

0

使用范围。$应用

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

的setInterval是没有棱角功能,使范围不清爽。

或者用角服务(者优先的解决方案):

+0

我相信使用$间隔首选,建议不是做$适用于这种情况下 –

+0

Yee @GopinathShiva感谢评论我更新了答案 –

+0

欣赏:) –

0

可能的值更新在controller但不是在DOM 试试这个

JS

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

或者您可以使用$interval并且您正在遵循我的回答y您可以同时使用$timeout代替的setTimeout也

0

您应该使用$interval

更新您的代码以这种

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

确保您$scope.timer是正确初始化

0

setInterval不是一个角功能,因此范围不刷新,我不建议使用scope.$apply()作为其浪费。

使用角度的内置$interval方法:

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

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

1

更好是使用$interval,例如:

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

 
app.controller('AppCtrl', function($scope, $interval) { 
 
    $scope.timer = 0; 
 
    $interval(function() { $scope.timer++; }, 1000); 
 
});
<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>

0

您可以尝试采用了棱角分明的$interval,从docs

你将它添加到您的控制器,并使用它,就像this(查看Plunker)

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

的setInterval是JS原生功能,来执行它在摘要循环内部,您应该调用apply()方法,或者使用AngularJS文档中建议的wrapper $ interval。

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

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

相关问题