1

AngularJs を使用してタイマーを作成しようとしましたが、setInterval メソッド内で timerCount をインクリメントすると、値は変更されますが、ビューは新しい値で更新されません。コンソール ログを確認したところ、timerCount が必要に応じて増加し、ボタンをもう一度クリックすると、timerCount がビューの現在の値を取得することがわかりました。ビューを毎秒変更するにはどうすればよいですか?

ここにhtmlがあります：

<p>timer count: {{timerCount}}</p>
  <button ng-click="startTimer()">start timer</button>

そしてコントローラー：

var app=angular.module('examApp',[]);
    app.controller('examCtrl',function($scope){

        $scope.timerCount=0;
        $scope.startTimer=function(){
            setInterval(function(){
                console.log($scope.timerCount);
                $scope.timerCount++;
            },1000)
        }
    })

http://plnkr.co/edit/CScdb8QFSFpKR7WJWuQJ?p=preview

4

2 に答える 2

3

angular コンテキスト外でangular スコープを更新する関数variable/bindingsは、angular を実行してダイジェスト サイクルを実行しないため、バインディングが HTML で更新されません。

ここではsetInterval、非同期で実行されるネイティブ JavaScript 関数である (これはダイジェスト サイクルを実行する角度を開始しません) を使用しており、この関数からスコープ値を更新しようとしています。を使用する$interval代わりに使用する必要がありますsetInterval。

基本的に$intervalサービスはsetInterval内部で使用しますが、コールバック関数は内部$rootScope.$evalAsyncでラップされており、各間隔でダイジェスト サイクルを実行します。

コード

app.controller('examCtrl',function($scope, $interval){

    $scope.timerCount=0;
    $scope.startTimer=function(){
        $interval(function(){
            console.log($scope.timerCount);
            $scope.timerCount++;
        },1000)
    }
});

デモプランカー

于 2016-01-03T20:19:44.077 に答える
0

純粋な js を Angular と一緒に使用する場合は、次のような$applyメソッドを使用する必要があるため、Pankaj の回答と合わせて、これも使用できます。

$scope.startTimer=function(){
        setInterval(function(){
            console.log($scope.timerCount);
            $scope.timerCount++;
            $scope.$apply();
        },1000)
    }

その後、期待どおりに動作します。

于 2016-01-03T20:38:58.350 に答える