AngularJS在一个控制器改变模型值会触发其他模型更新 [英] AngularJS changing model value in one controller triggers model update in others

问题描述

编辑：

好吧，我更新的例子来避免环路问题，所以回到原来的问题就重新计算窗台B型对象。

在这个例子：
http://jsfiddle.net/qn2Wa/

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT; D​​IV NG控制器=A＆GT;＆LT;输入NG模型=M＆GT;
        {{一个（）}}
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV NG控制器=B＆GT;＆LT;输入NG模型=M＆GT;
        {{B（）}}
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JS

 函数A（$范围）{
    $ scope.m ='A';
    变种计数器= 0;
    $ scope.a =功能（）{
        的console.log（A+专柜+）;
        返回$ scope.m;
    }
}
函数B（$范围）{
    $ scope.m ='B';
    变种计数器= 0;
    $ scope.b =功能（）{
        的console.log（B+反++）;
        返回$ scope.m;
    }
}
 

只要我改变控制器A的输入值，它会调用B（），它是在一个完全独立的控制器。
为什么它会重新计算其他控制器的模型对象？有没有办法避免这种情况？

如果你看到控制台登录，您可以看到B的每一张打印你这是一个完全独立的控制器和范围输入字段中键入一些时间。

---

仅供参考我保持原来的code这里的问题。
它有错误，因为它正在更新在函数调用模型由一些评论指出，这是固定在上面的code。该错误可能会被移动到一个单独的问题。

http://jsfiddle.net/m8xtA/

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT; D​​IV NG控制器=A＆GT;＆LT;输入NG模型=M＆GT;
        {{一个（）}}  -  {{计数器}}
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV NG控制器=B＆GT;＆LT;输入NG模型=M＆GT;
        {{B（）}}  -  {{柜台}}
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JS

 函数A（$范围）{
    $ scope.m ='A';
    $ scope.counter = 0;
    $ scope.a =功能（）{
        $ scope.counter ++;
        返回$ scope.m;
    }
}
函数B（$范围）{
    $ scope.m ='B';
    $ scope.counter = 0;
    $ scope.b =功能（）{
        $ scope.counter ++;
        返回$ scope.m;
    }
}
 

解决方案

下面是一个有效的解决方案：

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

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

 函数A（$范围）{
    $ scope.m ='A';
    $ scope.counter = 0;
    //每一个'M'发生改变的时候执行
    $范围。$腕表（'M'，函数（）{
        $ scope.counter ++;
    }）
}
函数B（$范围）{
    $ scope.m ='B';
    $ scope.counter = 0;
    //每一个'M'发生改变的时候执行
    $范围。$腕表（'M'，函数（）{
        $ scope.counter ++;
    }）
}
 

希望这有助于，干杯

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>

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

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>

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

解决方案

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

这篇关于AngularJS在一个控制器改变模型值会触发其他模型更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！