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-model的父和子范围不会相互影响？

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资源来确保您不会一直重写代码。

AngularJS意外共享范围

4 个答案: