gpt4 book ai didi

angularjs - 使用两个 $watch 防止无限循环

转载 作者:行者123 更新时间:2023-12-03 06:45:43 28 4
gpt4 key购买 nike

我正在寻找一种技术来防止在 Angular 中使用两个 $watch 语句时出现无限循环。这个想法是当 var1 更改时,我希望它修改 var2。当 var2 更改时,我希望它修改 var1。但这通常会产生无限循环。有没有解决的办法?下面是一个演示该问题的简单示例。该代码将放入 Angular Controller 中。

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

最佳答案

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

  1. 变量 1 由用户修改
  2. Var 1 监视触发并设置 var2 = var1;
  3. Var 2 watch 触发并设置 var1 = var2;
  4. 由于 var 1 实际上没有改变,所以 watch 不再触发,不会发生无限循环。

这是演示这一点的代码片段:

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>

关于angularjs - 使用两个 $watch 防止无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31751621/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com