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

Question

编辑:

好的，我更新示例以避免循环问题，所以回到原来的问题，它仍然会重新计算 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;
    }
}

只要我更改 Controller A 中的输入值，它就会调用 b()，它位于一个完全独立的 Controller 中。为什么它会重新计算其他 Controller 中的模型对象？有没有办法避免这种情况？

如果您查看控制台日志，您会发现每次在 A 输入字段中键入内容时都会打印 B，而 A 输入字段位于完全独立的 Controller 和作用域中。

---

仅供引用我在这里保留问题的原始代码。它有错误，因为它正在更新函数调用中的模型，正如一些评论所指出的，这在上面的代码中已修复。错误可以移至单独的问题。

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

希望这有帮助，干杯