AngularJS : le changement de la valeur d'un modèle dans un contrôleur déclenche la mise à jour du modèle dans les autres.

Question

EDITAR:

Ok, j'ai mis à jour l'exemple pour éviter le problème de la boucle, donc pour revenir à la question initiale, il recalcule toujours les objets du modèle B.

Dans cet exemple : 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;
    }
}

dès que je modifie la valeur d'entrée dans le contrôleur A, il appelle b() qui se trouve dans un contrôleur totalement séparé. Pourquoi recalculerait-il les objets du modèle dans les autres contrôleurs ? Existe-t-il un moyen d'éviter cela ?

Si vous consultez le journal de la console, vous pouvez voir que B est imprimé chaque fois que vous tapez quelque chose dans le champ de saisie A, qui se trouve dans un contrôleur et une portée totalement distincts.

---

POUR RÉFÉRENCE, je conserve le code original de la question ici. Il a une erreur car il met à jour le modèle dans l'appel de fonction comme indiqué par certains des commentaires, cela est corrigé dans le code ci-dessus. L'erreur pourrait être déplacée dans une question séparée.

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

Voici une solution qui fonctionne :

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

Utilisation de Montre est un bon moyen d'y parvenir.

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

J'espère que cela vous aidera, merci.

Answer 2

Pendant le rendu du modèle, si vous changez le modèle ou l'objet utilisé pour lier le modèle, cela déclenchera un nouveau cycle de rendu qui se terminera par une boucle sans fin. Cela provoquera l'erreur suivante 'Error: 10 $digest() iterations reached. Aborting!'.

Dans votre code, lorsque {{a()}} est rendu, il modifie l'objet counter par la déclaration $scope.counter++; ce qui déclenchera la boucle sans fin puisque dans le modèle {{counter}} doit être rendu.

(Ce que vous voyez est causé par l'évaluation cassée, donc vous verrez un comportement funky).