Question

我需要能够在执行特定任务时忽略特定的手表。这是场景。

我在字段上有几个观察者用于计算“总计”字段。

可以手动修改所有这些字段，这将触发计算“总计”字段的手表。

也可以从保存状态加载字段，这也会触发计算“总计”字段的监视。

也可以手动覆盖，保存和加载“总计”字段。

当手动覆盖的“总计”字段与其他字段一起加载时，会出现此问题。重新计算“总计”的手表将被触发，并覆盖手动覆盖的“总计”。

我需要能够在负载发生时忽略手表。有没有办法解决这个问题？

我知道可以使用在创建手表时传回的取消注册功能来禁用观察者，但是当您重新创建观察者时仍然知道它正在观看的数据已经改变。

注意：这是围绕该问题的业务逻辑的过于简化的描述。无法禁用手表需要大量工作。

这是一个显示问题的小提琴：jsfiddle.net/vGWZy/1 /

Answer 1

您可以在特殊服务中存储观察者的回调和禁用，并使用服务方法的绑定和解除绑定

您的代码示例 http://jsfiddle.net/snicksnk/66osj8zm/

//Service for working with watcher's binding
var watchService = {
    watchers: {},
    create: function(name, callback){

        watchService.watchers[name] = 
        {
            'callback': callback,
            'disableCallback': null
        };
    },
    enable: function($scope, name){
        if (typeof watchService.watchers[name]['callback'] !== 'function'){
            return;
        }
        watchService.disable(name);
        var watcher = watchService.watchers[name]['callback'];
        watchService.watchers[name]['disableCallback'] = $scope.$watch(name, watcher, true);


    },
    disable: function(name){
        if (typeof watchService.watchers[name]['disableCallback'] !== 'function'){
            return;
        }
        watchService.watchers[name]['disableCallback']();
    }
};

//Creating of watcher's callbacks, instead of using $scope.$watch directly
watchService.create('item.value1',  function() {
    $scope.item.total = $scope.item.value1 * $scope.item.value2;
});


watchService.create('item.value2',  function() {
    $scope.item.total = $scope.item.value1 * $scope.item.value2;
});



//Wathcers enabler
$scope.enableWatchers = function(){
    watchService.enable($scope, 'item.value1');
    watchService.enable($scope, 'item.value2');
};

//Wathcers disable
$scope.disableWatchers = function(){
    watchService.disable('item.value1');
    watchService.disable('item.value2');
};

Answer 2

当您调用$ watch（）方法时，要创建绑定，Angular JS会返回“取消注册”功能。然后可以使用此函数解除绑定$ watch（）侦听器 - 您只需调用此返回的函数，即可删除$ watch（）侦听器。

var leaveWatcher = function() {
  $scope.$watch('selectedStatus', function(newValue, oldValue) {
    if (newValue[0] === "*") {
      .......
      leaveWatcher(); //Disable
    }
  });
};

leaveWatcher(); //Enable

http://www.bennadel.com/blog/2480-unbinding-watch-listeners-in-angularjs.htm

Answer 3

您可能想尝试使用ng-change来获得所需的结果。

以下example使用ng-change来调用函数来计算总值。

视图

<html ng-app>

  <head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ExampleCtrl">
     <h1>Hello Plunker!</h1>

    <label>Value 1:</label><input type="number" ng-model="value1" ng-change="updateTotal()"><br />
    <label>Value 2:</label><input type="number" ng-model="value2" ng-change="updateTotal()"><br />
    <label>Value 3:</label><input type="number" ng-model="value3" ng-change="updateTotal()"><br />

    <label>Total:</label><input type="number" ng-model="total" placeholder="Total"><br />
  </body>

</html>

控制器

function ExampleCtrl($scope){
    $scope.value1 = 0;
    $scope.value2 = 0;
    $scope.value3 = 0;
    $scope.total = 0

    $scope.updateTotal = function(){
       $scope.total = $scope.value1 + $scope.value2 + $scope.value3;
   };
}

这是一个微不足道的例子，但也许您可以根据自己的需要进行调整。

切换或禁用/重新启用AngularJS手表

3 个答案:

视图

控制器