AngularJS 意外共享范围

Question

>我在 AngularJS 中遇到了问题，我的父控制器和子控制器共享相同的模型。在此示例中，有递归注释：

<div ng-controller="ParentController">
     <label>Comment</label>
     <textarea name="comment_text" ng-model="comment_text"></textarea>
     <input type="submit" value="Leave Comment" ng-click="sendComment($event)" />
     <div class="replies">
        <div class="areply" ng-controller="ChildController">
          Someone said: blah blah blah
          <label>Reply</label>
          <textarea name="comment_text" ng-model="comment_text"></textarea>
          <input type="submit" value="Leave Comment" ng-click="sendComment($event)" />
        </div>
     </div>
</div>

第一个问题....我做错了吗？我的第二个有没有办法确保带有ng模型的父范围和子范围不会相互影响？

Answer 1

子控制器作用域是其父控制器作用域的原型后代。这是Angular的一个有意特征。子作用域可以访问父级的状态，但不能以相反的方式访问。

如果您不希望这种行为，则有几个选项 - 不使用嵌套控制器（您可以使用自定义服务在需要时共享数据，这更适合测试，因此被认为是最佳实践），或者更简单地说，只是调用父和子范围字段不同的名称。

Answer 2

你展示的代码显然太抽象了，无法给你一个更具体的答案，但重要的是要注意，子控制器扩展了其父控制器的行为（作为 OOP 中具有父级的子类）。

因此，同一变量应在子控制器及其父控制器中扮演相同的角色。如果你想要不同的行为，你应该使用另一个名称。

Answer 3

为什么不让你的孩子的文本区域使用不同的模型，并让sendComment接受哪个注释的论据？

<textarea name="comment_text" ng-model="comment_text"></textarea>
<input type="submit" value="Leave Comment" ng-click="sendComment($event, comment_text)" />
...
    <textarea name="comment_text" ng-model="child_comment_text"></textarea>
    <input type="submit" value="Leave Comment" ng-click="sendComment($event, child_comment_text)" />

否则，可以创建使用隔离作用域的指令。尝试一个教程，介绍隔离范围和指令，或者截屏视频，例如来自 egghead.io 的那些。

Answer 4

我会接受joews的第二个答案，而不是使用嵌套控制器，你不需要。 最佳做法是将它们分开。 通常，每个"页面"都有自己的控制器来指示该页面功能。 您可以使用服务和其他 angularjs 资源来确保您不会一直重写代码。