Menu
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>
839
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);
}
});
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);
}
});
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
