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

问题描述

好的，我更新了示例以避免循环问题，因此回到原始问题，它会重新计算 B 模型对象.

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

<div ng-controller=A"><输入ng-model=m">{{一种()}}
<div ng-controller=B"><输入ng-model=m">{{b()}}

JS

function A($scope) {$scope.m='a';无功计数器 = 0;$scope.a = 函数(){console.log("A" + counter++);返回 $scope.m;}}函数 B($scope) {$scope.m='b';无功计数器 = 0;$scope.b = 函数(){console.log("B" + counter++);返回 $scope.m;}}

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

如果您看到控制台日志，您可以看到每次在 A 输入字段中键入内容时都会打印 B，该字段位于完全独立的控制器和作用域中.

---

仅供参考我在这里保留了问题的原始代码.它有错误，因为它正在更新函数调用中的模型，正如一些评论所指出的，这在上面的代码中是固定的.该错误可以移至单独的问题.

http://jsfiddle.net/m8xtA/

<div ng-controller=A"><输入ng-model=m">{{a()}} - {{counter}}
<div ng-controller=B"><输入ng-model=m">{{b()}} - {{counter}}

JS

function A($scope) {$scope.m='a';$scope.counter = 0;$scope.a = 函数(){$scope.counter++;返回 $scope.m;}}函数 B($scope) {$scope.m='b';$scope.counter = 0;$scope.b = 函数(){$scope.counter++;返回 $scope.m;}}

解决方案

这里有一个可行的解决方案:

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

使用 $watch 是实现这一目标的好方法.

function A($scope) {$scope.m='a';$scope.counter = 0;//每次`m'改变时执行$scope.$watch('m',function(){$scope.counter++;})}函数 B($scope) {$scope.m='b';$scope.counter = 0;//每次`m'改变时执行$scope.$watch('m',function(){$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屋！