Angularjs：しばらくしてから変数を更新する

Question

サーバーからデータを取得するときにテキストを表示しようとしています。 固定の時間の後にメッセージを読み込むように変数を更新しようとしています。しかし、私はできません。

<div class="circularProgress" ng-if="showCircularProgress" id="circularProgress"> 
    <md-progress-circular md-mode="indeterminate" md-diameter="70"></md-progress-circular> 
    <span>{{progressMessage}}</span> 
</div> 

    angular.forEach(messageArray, function(msg, i) { 
    setTimeout(updateProgressMessage(msg), 1000); 
    }); 

var updateProgressMessage = function(message){ 
       $scope.progressMessage=message; 
      } 

誰でも設定遅延を提案できますか？

Answer 1

コールバックが呼び出された後で角度がダイジェストを実行することがわかるように、$timeoutを使用する必要があります。また、匿名関数でupdateProgressMessage(msg)をラップして、すぐに呼び出されないようにする必要があります。

angular.forEach(messageArray, function(msg, i) { 
    $setTimeout(function() { updateProgressMessage(msg); }, 1000); 
}); 

あなたは$intervalと$timeout

更新

のためのドキュメントを参照してください詳細については代わりに updateProgressMessage使用 $intervalを繰り返し呼び出すようにして、コールバックが定期的に

を呼び出される場合

messageArrayに複数の項目が含まれている場合var messageArray = [1,2,3,4,5]上記のコードでは、約1秒後にほぼ同時に起動する各項目のタイムアウトが作成されます。

私はこれがあなたが後にしている行動であるとは確信していません。あなたがこのようなことをしたいと思ったでしょう。

var messageArray = [1,2,3,4,5]; 

var intervalPromise = null; 

intervalPromise = $setInterval(function() { 
    if (messageArray.length > 1){ 
     // remove an item from the messageArray and update the progress message 
     updateProgressMessage(messageArray.shift()); 
    } else { 
     // no more update messages 
     $interval.cancel(intervalPromise); 
    } 
}, 1000); 

var updateProgressMessage = function(message){ 
    $scope.progressMessage = message; 
}; 

これにより、間隔が作成され、毎秒火災が発生します。すべてのメッセージが処理されると、その後の実行を防ぐために間隔がキャンセルされます。

Answer 2

$ timeoutを使用します。

angular.forEach(messageArray, function(msg, i) { 
    $timeout(function() { updateProgressMessage(msg); }, 1000); 
}); 

setTimeoutを使用する場合は、$ scope。$ applyを実行します。これは悪い習慣です。

angular.forEach(messageArray, function(msg, i) { 
    $setTimeout(function() { updateProgressMessage(msg); }, 1000); 
    $scope.$apply() 
});