window.setInterval（）はangular.jsで正しく機能しません

Question

後でUIにtimerを表示するためにangular.jsコントローラでsetInterval（）関数を使用しました。非アクティブな値を秒単位で持つスコープ変数を作成します。

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

1秒ごとに画面を更新する必要があります。しかしそれはしません。 2秒後、3秒後に画面を更新し、たびに毎秒更新しますが、一貫性がありません。 私はスコープを記録します。タイマー値は正しく動作します。

これの問題は何でしょうか。 angular.jsはネイティブのjavascriptを何とか制限していますか？スコープが爽やかではありませんので

Answer 1

使用スコープ。$適用

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

たsetIntervalは角関数ではありません。

または使用角度サービス（好ま溶液）：

Answer 2

値がcontrollerに更新しますがDOM にこの

JS

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

をしようとされていないかもしれませ

または$intervalを使用することができ、あなたは私の答えy OUは、あなたがあなたの$scope.timerが

Answer 3

を$timeoutを使用することができますしたがって、スコープはリフレッシュされません。scope.$apply()を無駄に使用することをおすすめしません。

使用角度の作り付け$interval方法：

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

ドキュメント：https://docs.angularjs.org/api/ng/service/ $間隔

Answer 4

setIntervalを正しく初期化されていることが、角度の関数ではないことを確認し、この

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

にあなたのコードを更新$interval

を使用する必要があります代わりのsetTimeoutの

Answer 5

ベター$intervalを使用することです、例：

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

あなたはのsetIntervalは、それを実行するために、JSネイティブ関数である

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

Answer 7

あなたはthisのように、（ビューPlunker）をお使いのコントローラにそれを追加し、それを使用する必要がdocs

から、角度の$intervalを使用して試みることができますダイジェストループの内側では、apply（）メソッドを呼び出すか、代わりにAngularJSドキュメントで提案されているようにラッパー$ intervalを使用する必要があります。追加の参考のために

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

https://docs.angularjs.org/api/ng/service/ $間隔