Variable in Intervall-Brüchen inkrementieren Datenbindung

Question

Ich mache nur eine Zahl innerhalb eines Intervalls. Dies funktioniert bis 600 und dann wird die Ansicht nicht mehr aktualisiert (die Variable wird weiterhin im Hintergrund aktualisiert). Wenn ich die Intervallzeit auf 500 reduziere, geht der Inkrementwert auf 1200, was mich dazu bringt zu denken, dass es etwas Zeitliches ist, das dieses Verhalten verursacht. Die tatsächliche Variable nimmt zwar zu, aber die Bindung wird unterbrochen, und die Ansicht wird nicht aktualisiert.

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

Um erwartetes Ergebnis zu erzielen, verwenden $ scope.apply

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

    }, 1000); 
}); 

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

Empfohlene Weise gleiches Ergebnis zu erzielen ist $ Intervall

JS mit:

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

Es gibt einige Dinge

1. Sie $interval Service statt setInterval verwenden sollten, die Pflege der laufenden verdauen dauern wird nach jedem Callback-Funktion aufgerufen wird.
2. Folgen Sie Dot rule, während Sie ng-model als ion-content directive create a prototypically inherited child scope definieren. wie $scope.model = { u_stepCount: 0 }ODER sonst könnten Sie Controller als Muster beim Definieren von Controller verwenden. Wo werden Sie $scope von Controller loswerden und this (Kontext) ausgesetzt, um Bindung anzuzeigen.

Insgesamt werden Ihre Codeänderungen wie folgt aussehen.

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> 

-Code

//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); 
});