window.setInterval() funktioniert nicht ordnungsgemäß in angular.js

Question

Ich habe setInterval() -Funktion in angular.js Controller verwendet, um den Timer auf UI später anzuzeigen. Erstellen Sie eine Bereichsvariable, die den Wert der Inaktivität in Sekunden hat.

setInterval(function(){ scope.timer++ }, 1000); 

was es zu tun ist, sollte es Bildschirm jede Sekunde aktualisieren. aber das tut es nicht. einige Zeit aktualisiert es Bildschirm nach zwei Sekunden, drei Sekunden und manchmal aktualisiert es jede Sekunde, aber es ist nicht konsistent. während ich den Bereich protokolliere. Timer-Wert verhält es sich richtig.

was wäre das Problem. Schränkt angular.js natives Javascript irgendwie ein oder was?

Answer 1

Gebrauchbereich. Anwenden $

setInterval(function(){ scope.timer++; scope.$apply(); }, 1000); 

setInterval nicht Winkelfunktion ist so Umfang nicht erfrischend ist.

Oder nutzen Winkeldienst (bevorzugt Lösung):

Answer 2

der Wert sein kann, ist in der controller modernisiert werden, aber nicht in der DOM versuchen, diese

JS

setInterval(function(){ 
scope.timer++ 
setTimeout(function(){ 
    $scope.$apply(); 
}, 1); 
}, 1000); 

Oder Sie können $interval verwenden und Sie folgen meine Antwort y ou kann $timeout statt setTimeout verwenden auch

Answer 3

Sie $interval

Aktualisieren Sie Ihren Code auf diese

$interval(function(){ 
    $scope.timer++; 
}, 1000) 

Achten Sie darauf verwenden sollten, dass Ihr $scope.timer korrekt initialisiert ist

Answer 4

setInterval ist keine Winkelfunktion , daher wird der Umfang nicht aktualisiert, ich empfehle nicht scope.$apply() als verschwenderisch zu verwenden.

Verwendung Winkel des eingebauten $interval Methode:

.controller('ExampleController', ['$scope', '$interval', 
    function($scope, $interval) { 
     stop = $interval(function() { 
      $scope.timer++; 
     }, 1000); 
}); 

Dokumentation: https://docs.angularjs.org/api/ng/service/ $ Intervall

Answer 5

Besser ist $interval zu verwenden, zB:

var app = angular.module('MyApp', []); 
 

 
app.controller('AppCtrl', function($scope, $interval) { 
 
    $scope.timer = 0; 
 
    $interval(function() { $scope.timer++; }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
 
    <div ng-bind="timer"></div> 
 
</div>

Answer 6

Sie könnten $interval vom docs

Sie haben mit Angular versuchen Sie es zu Ihrem Controller hinzuzufügen, und verwenden Sie es, wie this (Ansicht Plunker)

app.controller('testController', ['$scope', '$interval', function($scope, $interval) { 
    var count = 1; 
    $scope.count = count; 
    $interval(function() { 
    $scope.count++; 
    }, 1000); 
}]); 

Answer 7

setInterval ist eine JS native Funktion, um es auszuführen Innerhalb der Digest-Schleife sollten Sie die Methode apply() aufrufen oder alternativ das wrapper $ interval verwenden, wie im AngularJS doc vorgeschlagen.

$interval(function(){ scope.timer++ }, 1000); 

https://docs.angularjs.org/api/ng/service/ $ Intervall