17

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/のデモ

4

3 に答える 3

40

これは、Angular が知らないうちに値を更新したためです。

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

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);
于 2013-03-27T17:10:32.930 に答える
0

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

<div ng-controller="myController">
于 2017-10-10T14:58:40.050 に答える