javascript - Angular variable in set Timeout doesn't refresh? - Stack Overflow

admin2025-04-18 1

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('.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/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework/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>

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./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./nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework./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>

Share edited Dec 10, 2017 at 13:58 Sarah_A 1585 silver badges18 bronze badges asked May 25, 2015 at 8:56 vivid 1,1453 gold badges14 silver badges34 bronze badges

3 use $timeout, Instead setTimeout, – user3227295 Commented May 25, 2015 at 8:57

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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./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./nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework./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>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744931678a275194.html

javascriptAngular variable in set Timeout doesn39t refreshStack Overflow

最新回复(0)

javascript - Angular variable in set Timeout doesn&#39;t refresh? - Stack Overflow

3 Answers 3

javascriptAngular variable in set Timeout doesn39t refreshStack Overflow

javascript - Angular variable in set Timeout doesn't refresh? - Stack Overflow