間隔增量變量中斷數據綁定

Question

我所做的是在一個區間內增加一個數字。這工作到600，然後視圖停止更新（變量仍在後臺更新）。如果我將間隔時間減少到500，則增量值會上升到1200，這使我認爲它與時間有關，導致此行爲。實際變量不斷增加，但綁定中斷並且視圖不會更新。

app.controller('testCtrl', function($state, $scope, $cordovaSQLite, $filter, $timeout,$ionicHistory){ 

setInterval(function(){ 

     $scope.u_stepCount += 200; 
     console.log($scope.u_stepCount); 
    }, 1000); 

}); 


<ion-view title="Test"> 
<ion-content class="dashboard-background"> 
    <p id="steps">{{u_stepCount}}</p> 
    <p id="test_steps"></p> 
    </ion-content> 

</ion-view> 

Answer 1

爲了達到預期的結果，使用$ scope.apply

setInterval(function(){ 
    $scope.$apply(function() { 
     $scope.u_stepCount += 200; 
     console.log($scope.u_stepCount); 

    }, 1000); 
}); 

http://codepen.io/nagasai/pen/zBmLmj

推薦的方式來實現同樣的結果使用$間隔

JS：

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope,$interval) { 
    $scope.u_stepCount=0; 
$interval(function(){ 
     $scope.u_stepCount += 200; 
     console.log($scope.u_stepCount); 

    }, 1000); 

}); 

http://codepen.io/nagasai/pen/rLqAQG

Answer 2

有幾件事情

1. 您應該使用$interval服務，而不是setInterval，這將需要運行消化每次回調函數被調用後的護理。
2. 請按照Dot rule同時將ng-model定義爲ion-content directive create a prototypically inherited child scope。像$scope.model = { u_stepCount: 0 }或其他你可以使用控制器作爲模式，同時定義控制器。您將從控制器中刪除$scope，並將this（上下文）暴露給視圖綁定。

總體而言，您的代碼更改將如下所示。

HTML

<ion-view title="Test"> 
<ion-content class="dashboard-background"> 
    <p id="steps">{{model.u_stepCount}}</p> 
    <p id="test_steps"></p> 
    </ion-content> 
</ion-view> 

代碼

//removing other dependency that you had just to make code cleaner 
//you can have it there if you needed in your actual codebase 
app.controller('testCtrl', function($state, $scope, $interval){ //<-inject $interval here 
    $scope.model = { u_stepCount: 0 }; 
    $interval(function(){ 
     $scope.model.u_stepCount += 200 ; 
     console.log($scope.u_stepCount); 
    }, 1000); 
});