只要没有给予儿童ng模型直接输入,反映到儿童范围的ng模型

时间:2017-08-02 11:34:46

标签: angularjs angularjs-scope

请查看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>

2 个答案:

答案 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的任何更改都不会影响父范围。

更新了演示https://plnkr.co/edit/xG6nY8yTR3AoNkeHex0E?p=preview

答案 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>