AngularJS changing model value in one controller triggers model update in others

问题

EDIT:

Ok I update the example to avoid the loop problem, so back to the original question it sill recalculate B model objects.

In this example: 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>

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

as soon as I change the input value in controller A, it will call b() which is in a totally separate controller. Why would it recalculate the model objects in the other controllers? Is there a way to avoid this?

If you see the console log you can see that B is printed every time you type something in A input field which is in a totally separate controller and scope.

JUST FOR REFERENCE I keep the original code for the question here. It has error since it is updating the model in the function call as pointed out by some of the comments, this is fixed in the above code. The error could be moved to a separate question.

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>

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

回答1:

here is a working solution :

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

Using $watch is a good way to accomplish that.

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

Hope this help, cheers

回答2:

During the template rendering, if you change the model or object used for binding the template, it will trigger a new rendering cycle which will end up with a endless loop. It will cause this error 'Error: 10 $digest() iterations reached. Aborting!'.

In your code, when {{a()}} is being rendered, it modifies the object counter by the statement $scope.counter++;, which will trigger the endless loop since in the template {{counter}} needs to be rendered.

(What you see is caused by the broken evaluation, so you will see some funky behavior.)

来源：https://stackoverflow.com/questions/18686017/angularjs-changing-model-value-in-one-controller-triggers-model-update-in-others

标签

angularjs

angularjs-scope