编辑:
好的,我更新了示例以避免循环问题,所以回到原来的问题,它仍然会重新计算 B 模型对象。
在这个例子中:http: //jsfiddle.net/qn2Wa/
<div ng-app>
<div ng-controller="A"><input ng-model="m">
{{a()}}
</div>
<div ng-controller="B"><input ng-model="m">
{{b()}}
</div>
</div>
JS
function A($scope) {
$scope.m='a';
var counter = 0;
$scope.a = function(){
console.log("A " + counter++);
return $scope.m;
}
}
function B($scope) {
$scope.m='b';
var counter = 0;
$scope.b = function(){
console.log("B " + counter++);
return $scope.m;
}
}
一旦我更改控制器 A 中的输入值,它就会调用 b() ,它位于一个完全独立的控制器中。为什么它会重新计算其他控制器中的模型对象?有没有办法避免这种情况?
如果您看到控制台日志,您可以看到每次在 A 输入字段中输入内容时都会打印 B,该输入字段位于完全独立的控制器和范围中。
仅供参考我在这里保留问题的原始代码。它有错误,因为它正在更新函数调用中的模型,正如一些评论所指出的,这在上面的代码中得到了修复。该错误可以移至一个单独的问题。
<div ng-app>
<div ng-controller="A"><input ng-model="m">
{{a()}} - {{counter}}
</div>
<div ng-controller="B"><input ng-model="m">
{{b()}} - {{counter}}
</div>
</div>
JS
function A($scope) {
$scope.m='a';
$scope.counter = 0;
$scope.a = function(){
$scope.counter++;
return $scope.m;
}
}
function B($scope) {
$scope.m='b';
$scope.counter = 0;
$scope.b = function(){
$scope.counter++;
return $scope.m;
}
}