Question

我正在寻找一种技术来防止在角度中使用两个$watch语句时出现无限循环。想法是var1更改时，我希望它修改var2。当var2发生变化时，我希望它能够修改var1。但这通常会产生无限循环。有没有解决的办法？下面是一个简单的例子来说明这个问题。这段代码将放在角度控制器中。

$scope.$watch('var1', function(newVal){
    $scope.var2 = newVal
})
$scope.$watch('var2', function(newVal){
    $scope.var1 = newVal
})

Answer 1

它实际上不会导致无限循环，因为一旦两个变量相等，手表就会停止被触发。

Var 1由用户
Var 1 watch fires并设置var2 = var1;
Var 2 watch fires并设置var1 = var2;
由于var 1并没有实际改变，因此手表不再被触发，也不会发生无限循环。

这是一个证明这一点的片段：

angular.module('myApp', [])
  .controller('myController', function($scope) {

    $scope.$watch('var1', function(newVal) {
      $scope.var2 = newVal;
    });

    $scope.$watch('var2', function(newVal) {
      $scope.var1 = newVal;
    });

  });

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="myController">
    <label>Var1</label>
    <input ng-model="var1">
    <br/>
    <label>Var2</label>
    <input ng-model="var2">
  </div>
</body>

</html>

使用两个$ watch预防无限循环

1 个答案: