Question

编辑：

好的我更新了示例以避免循环问题，所以回到原来的问题，它将重新计算B模型对象。

<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，该输入字段位于完全独立的控制器和范围内。

仅供参考我在这里保留问题的原始代码。它有错误，因为它正在函数调用中更新模型，如某些注释所指出的，这在上面的代码中已得到修复。错误可以转移到另一个问题。

http://jsfiddle.net/m8xtA/

<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;
    }
}

Answer 1

这是一个有效的解决方案：

http://jsfiddle.net/m8xtA/1/

使用$watch是实现这一目标的好方法。

function A($scope) {
    $scope.m='a';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}
function B($scope) {
    $scope.m='b';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}

希望这个帮助，欢呼

Answer 2

在模板渲染过程中，如果更改用于绑定模板的模型或对象，它将触发一个新的渲染周期，最终会出现无限循环。它会导致此错误'Error: 10 $digest() iterations reached. Aborting!'.

在代码中，当呈现{{a()}}时，它会通过语句counter修改对象$scope.counter++;，这将触发模板{{counter}}中的无限循环需要渲染。

（你看到的是评价破坏造成的，所以你会看到一些时髦的行为。）

AngularJS在一个控制器中更改模型值会触发其他控制器中的模型更新

编辑：

2 个答案: