用两个 $watches 防止无限循环

Question

我正在寻找一种技术来防止在 angular 中使用两个 $watch 语句时出现无限循环。这个想法是当 var1 改变时，我希望它修改 var2。当 var2 改变时，我希望它修改 var1。但这通常会造成无限循环。有没有解决的办法？下面是一个演示该问题的简单示例。此代码将进入 angular 控制器。

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

Answer 1

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

Var 1 已被用户修改
Var 1 watch 触发并设置 var2 = var1;
Var 2 观察触发并设置 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>

用两个 $watches 防止无限循环

Preventing an infinite loop with two $watches

angularjs

watch