AngularJS alterando o valor do modelo em um controlador aciona atualização de modelo em outros
Ok, eu atualizo o exemplo para evitar o problema do loop, então, de volta à pergunta original, ele recalculará os objetos do modelo B.
Neste exemplo: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;
}
}
assim que eu alterar o valor de entrada no controlador A, ele chamará b () que está em um controlador totalmente separado. Por que recalcular os objetos do modelo nos outros controladores? Há alguma maneira de evitar isto?
Se você vir o log do console, verá que B é impresso toda vez que você digita algo no campo de entrada A, que está em um controlador e escopo totalmente separados.
APENAS PARA REFERÊNCIA Eu mantenho o código original para a questão aqui. Tem erro desde que está atualizando o modelo na chamada de função como apontado por alguns dos comentários, isto é corrigido no código acima. O erro pode ser movido para uma questão separada.
<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;
}
}