防止两个$watch的无限循环

我正在寻找一种技术，以防止无限循环时使用两个$watch语句在角。当var1改变时，我想让它改变var2。当var2变化时，我希望它能修改var1。但这通常会产生一个无限循环。有办法解决这个问题吗?下面是演示这个问题的一个简单示例。这段代码应该放在angular控制器中。

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

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

Var 1被用户
Var 1 watch fire and set var2 = var1;
Var 2 watch fire and set 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>

相关内容

最新更新

热门标签：