Angular variable in Timeout set not updating?
I have a question. Why isn't the h1 value updated after changing it in a function? Should make an update because as far as I know about Angular it always updates when a variable changes or am I wrong?
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
source to share
3 answers
you should use $timeout
instead setTimeout
because it setTimeout
has no angular scope information. So this 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);
}
});
+3
source to share
The update setTimeout
happens outside of angular, so the view is not updated. 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);
}
});
+3
source to share
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>
+1
source to share