4

看到这个jsfiddle；我有两组输入框，其中包含通过 ng-model 附加的范围变量。

将此系统想象成 google 风格的搜索，具有单个搜索框和“高级搜索”。

  • 当更新单个搜索输入时（在示例中，a），则有一个函数可以更新相关的“高级”输入。我已经在$scope.$watch('a', ... ).

  • 编辑“高级”搜索输入时，也应更新单个输入（在$scope.$watch('b', ... ).

当然，这两个会产生一个反馈循环——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 回答