4

この jsfiddleを参照してください。ng-model を介してスコープ変数がアタッチされた 2 セットの入力ボックスがあります。

このシステムは、単一の検索ボックスと「高度な検索」を備えた Google スタイルの検索のようなものだと考えてください。

  • 単一の検索入力が更新されると (例ではa)、関連する「高度な」入力を更新する関数があります。でこれを実装しました$scope.$watch('a', ... )。

  • 「高度な」検索入力が編集された場合、単一の入力も更新する必要があります ( $scope.$watch('b', ... ).

もちろん、これら 2 つはフィードバック ループを生成します -a更新bとその逆、無限に続く - これは良くありません! 上記の各ウォッチの開始時に「他のウォッチャーを一時停止する」コマンドを発行し、(他の変数を更新した後)「ウォッチャーを再起動する」コマンドを発行して、これを防止できるようにしたいと考えています。

これを行う方法はありますか？

4

1 に答える 1

2

簡単な例をまとめました。

<body ng-app="app" ng-controller="myTestCntrl">
    <input type="button" ng-click="increaseCounter()" value="Click me" /> clicked: {{counter}z} times<br/>
    <input type="button" ng-click="pauseWatcher()" value="{{watcherBtnText}}" /> watched: {{internalCounter}} times<br/>
    <strong>Number of $$watchers in $scope:</strong> {{$$watchers.length}}
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript">
        angular.module('app', [])
            .controller('myTestCntrl', function myTestCntrl($scope) {
            $scope.counter = 0;
            $scope.pauseWatching = false;
            $scope.watcherBtnText = 'Pause';
            $scope.internalCounter = -1;
            $scope.increaseCounter = function() {
                $scope.counter++;
            };
            var listenerFn = function() {
                if ($scope.pauseWatching) {
                    namedWatcher();
                } else {
                    $scope.internalCounter++;
                };
            }
            var namedWatcher = $scope.$watch('counter', listenerFn);
            $scope.pauseWatcher = function() {
                if ($scope.pauseWatching) {
                    $scope.watcherBtnText = 'Pause';
                    $scope.pauseWatching = false;
                    $scope.internalCounter--;
                    namedWatcher = $scope.$watch('counter', listenerFn);
                } else {
                    $scope.watcherBtnText = 'Continue';
                    $scope.pauseWatching = true;
                    namedWatcher();
                };
            }
        });
    </script>
</body>

jsfiddle のデモ: http://jsfiddle.net/BuriB/63sND/

于 2014-05-14T12:50:54.643 に答える