[英]angular $scope variable updated but not displayed
在下面的控制器中,$ scope.timer每秒钟增加一次,但在视图{{timer}}
中不反映其内容。
myapp.controller('TimeCtrl', ['$scope', function($scope){
$scope.timer = 0;
setInterval(function(){
$scope.timer = $scope.timer + 1;
console.log($scope.timer);
},1000);
}]);
我可以添加$scope.$apply();
来解决它 计时器更新后为什么? 为什么计时器不更新?
在这里提琴: http : //jsfiddle.net/wvxgzx76/1/
因为setInterval
在$digest
循环之外-而是使用Angulars $interval
指令:
myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope, $interval){
$scope.timer = 0;
$interval(function(){
$scope.timer = $scope.timer + 1;
console.log($scope.timer);
},1000);
}]);
只需将您的代码包装到适用范围内即可:
var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', function($scope){
$scope.timer = 0;
setInterval(function(){
$scope.$apply(function () {
$scope.timer = $scope.timer + 1;
console.log($scope.timer);
});
},1000);
}]);
或使用$ interval代替setInterval(我更喜欢这样):
var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope,$interval){
$scope.timer = 0;
$interval(function(){
$scope.timer = $scope.timer + 1;
console.log($scope.timer);
},1000);
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.