javascript - モデルへの変更のAngularJS通知ビュー

Question

コントローラーの Javascript Date オブジェクトに基づいてビューに現在の時刻を表示しようとしています。私のコントローラーは次のようになります。

myApp.controller('DateCtrl', function($scope) {
    var date = new Date();
    $scope.minutes = date.getMinutes();
    $scope.hours = date.getHours();
    $scope.seconds = date.getSeconds();
    var updateTime = function() {
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    }
    $scope.clickUpdate = function() {
        setInterval(updateTime, 1000);
    }
});

私の見解では、私は単に持っています：

<div ng-controller="DateCtrl">
    <div>This is the hour: {{ hours }}</div>
    <div>This is the minute: {{ minutes }}</div>
    <div>This is the second: {{ seconds }}</div>
    <button ng-click="clickUpdate()">Click Update Here!</button>
</div>

何らかの理由で、このsetInterval()メソッドは 1 回しか機能せずupdateTime()、設定どおりに 1 秒ごとに実行し続けることができません。簡単なconsole.log()ステートメントを入力すると、それが 1 秒ごとに実行されたので、非常に混乱しています。

私もチェックアウト$scope.watch()しまし$scope.digest()たが、どのように使用できるか、またはこのシナリオで使用する必要があるかどうかはよくわかりません。

編集:さらに調べると、1 秒ごとsetIntervalに呼び出して正常に動作しているように見えますが、呼び出しのたびにスコープ内の値がビューに反映されていません。updateTime()

Answer 1

これは、角度の世界(setInterval)の外からスコープを変更しているためです。$apply次の変更を行う必要があります。

var updateTime = function() {
    $scope.$apply(function(){
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    });
}

または、 などの角度認識関数を使用し$timeoutます。この質問の @asgoth の回答を確認して、角度認識 setInterval()関数を作成してください。

Answer 2

機種変更後も使えますが、そのほうがいい$scope.$digest() と思います$scope.$apply