请查看https://plnkr.co/edit/j6S9pKL8sLVdSZNFNe9z?p=preview
<body >
<h4>Try me </h4> <input placeholder="top box" ng-model='address' />
<div ng-controller="ToddlerCtrl">
<h4>Try me </h4>
<input placeholder="box2" ng-model='address' /> - {{address}}
<input placeholder="box3" ng-model='address' />
</div>
<div ng-controller="otherCtrl">
<h4>Try me </h4>
<input placeholder="box4" ng-model='address' /> - {{address}}
<input placeholder="box5" ng-model='address' />
</div>
框2,3彼此绑定是有道理的。 方框4,5彼此绑定是有意义的。
但是第一个输入框与所有其他输入框绑定,只要我们不在其后面的框中直接输入,它就只保持。
直接提供价值的人会失去与顶盒的绑定。
我无法破坏顶部(第一个)框与其他框的绑定,无需在框中键入内容,保持其模型名称相同(地址)并将第一个框保持在相同范围 < / p>
答案 0 :(得分:1)
您可以将ng-controller
表单正文移除到另一个div,以使每个绑定不同。现在每个绑定都将发生在每个控制器的范围内。如果嵌套控制器,则父作用域值将反映在子控制器的作用域中。这是通过维护相同的ng-model
名称来实现此目的的一种方法。替代方案是将父控制器outerCtrl
的模型名称更改为其他内容
<body>
<div ng-controller='outerCtrl'>
<h4>Try me </h4> <input placeholder="top box" ng-model='address' />
</div>
<div ng-controller="ToddlerCtrl">
<h4>Try me </h4>
<input placeholder="box2" ng-model='address' /> - {{address}}
<input placeholder="box3" ng-model='address' />
</div>
<div ng-controller="otherCtrl">
<h4>Try me </h4>
<input placeholder="box4" ng-model='address' /> - {{address}}
<input placeholder="box5" ng-model='address' />
</div>
</body>
<强>更新强>:
当您在第一个输入中键入内容时,无论输入是否在控制器内(对于您的情况),该值都将绑定到$scope.$parent
,并且会反映在所有位置。但是,如果更改控制器的ng-model
,则绑定发生在该控制器的$scope
中。现在$scope
和$scope.$parent
中的地址值不同,控制器的$ scope的任何更改都不会影响父范围。
答案 1 :(得分:1)
http://www.angularjshub.com/examples/basics/nestedcontrollers/
如果我们不知道AngularJS是如何工作的,那么直接在控制器管理的$ scope对象上定义变量会产生意外行为。
使用对象变量:https://plnkr.co/edit/mQDFg2pM5u3cjuhDgha4?p=preview 试试我 试试我 - {{地址}}
<div ng-controller="otherCtrl">
<h4>Try me </h4>
<input placeholder="box4" ng-model='firstModelObj.address' /> - {{address}}
<input placeholder="box5" ng-model='firstModelObj.address' />
</div>