Angular variable in set Timeout doesn't refresh?
Question
I've got some question. Why doesn't h1 value refresh after it is changed in function? Should do the refresh because as far as I know about Angular, it always does a refresh on change of variable, or I'm on the wrong track?
angular.module('ionicApp', ['ionic']) .controller('MainCtrl', function($scope) { $scope.CurrentCount = 0; $scope.CallCounter = function(){ setTimeout(function(){ console.log($scope.CurrentCount) if($scope.CurrentCount != 9){ $scope.CurrentCount = $scope.CurrentCount+1; $scope.CallCounter(); }},1000); } });
body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } .container h1{ text-align:center; color:green; }
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Count Down</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller= "MainCtrl"> <div class="container"> <div class="spacer"></div> <h1>{{CurrentCount}}</h1> <div class="button button-positive" ng-click="CallCounter()">CountDown</div> </div> </body> </html>
3 answers
solution1
3 2015-05-25 08:59:47
Update in setTimeout is happening outside angular's knowledge, hence the view is not updating. Do it inside $timeout .
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $timeout) {
$scope.CurrentCount = 0;
$scope.CallCounter = function(){
$timeout(function(){
console.log($scope.CurrentCount)
if($scope.CurrentCount != 9){
$scope.CurrentCount = $scope.CurrentCount+1;
$scope.CallCounter();
}},1000);
}
});
solution2
3 ACCPTED 2015-05-25 09:00:52
you should use $timeout instead of setTimeout , because setTimeout hasn't info about angular scope. So it should be
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function ($scope, $timeout) {
$scope.CurrentCount = 0;
$scope.CallCounter = function () {
$timeout(function () {
console.log($scope.CurrentCount)
if ($scope.CurrentCount != 9) {
$scope.CurrentCount = $scope.CurrentCount + 1;
$scope.CallCounter();
}
}, 1000);
}
});
solution3
1 2015-05-25 08:58:43
angular.module('ionicApp', ['ionic']) .controller('MainCtrl', function($scope,$timeout) { $scope.CurrentCount = 0; $scope.CallCounter = function(){ $timeout(function(){ console.log($scope.CurrentCount) if($scope.CurrentCount != 9){ $scope.CurrentCount = $scope.CurrentCount+1; $scope.CallCounter(); }},1000); } });
body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } .container h1{ text-align:center; color:green; }
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Count Down</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller= "MainCtrl"> <div class="container"> <div class="spacer"></div> <h1>{{CurrentCount}}</h1> <div class="button button-positive" ng-click="CallCounter()">CountDown</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Angular 6 - changing the variable but doesn't refresh the view
Angular name doesn't refresh
Angular constructor doesn't set a local variable before ngOnInit() is called
angular $timeout after refresh
clearTimeout doesn't clear the timeout variable
Hover set timeout doesn't work
Set Timeout and NgZone in Angular
Don't reset the timeout on refresh
Angular 1: Last checkbox doesn't stay checked after page refresh
Angular page doesn't refresh after data is added or removed
Related Tags