web-dev-qa-db-ja.com

AngularJS：基本的な$ watchが機能しない

AngularJSで時計を設定しようとしていますが、明らかに何かがおかしいのですが、それを完全に理解することはできません。すぐにページが読み込まれるとウォッチが起動しますが、ウォッチした値を変更すると起動しません。記録のために、無名関数に監視を設定して監視変数を返すようにしましたが、まったく同じ結果が得られます。

以下の最小限の例をリギングして、コントローラーですべてを行います。それが違いを生む場合、私の実際のコードはディレクティブに接続されていますが、どちらも同じように失敗しています。基本的に欠けているものがあるように感じますが、表示されません。

HTML：

<div ng-app="testApp">
    <div ng-controller="testCtrl">
    </div>
</div>

JS：

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

function testCtrl($scope) {
    $scope.hello = 0;

    var t = setTimeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

    $scope.$watch('hello', function() { console.log('watch!'); });
}

タイムアウトは機能し、helloは増加しますが、時計は作動しません。

http://jsfiddle.net/pvYSu/ のデモ

angularjswatch
17
David Kiger

これは、Angularを知らずに値を更新したためです。

setTimeoutの代わりに$timeoutサービスを使用する必要があり、その問題を心配する必要はありません。

function testCtrl($scope, $timeout) {
    $scope.hello = 0;

    var t = $timeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

    $scope.$watch('hello', function() { console.log('watch!'); });
}

または、$ scope。$ apply（）;を呼び出すこともできます。強制的にangularで値を再確認し、必要に応じて監視を呼び出します。

var t = setTimeout( function() { 
    $scope.hello++;
    console.log($scope.hello); 
    $scope.$apply();
}, 5000);
40
Martin

$ intervalと$ timeoutなしで使用できます

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);
1
sumit_suthar

Divがコントローラーに登録されていないために発生することもあります。次のようにdivにコントローラーを追加すると、時計が機能するはずです。

<div ng-controller="myController">
0
Rakesh