1

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

4

4 回答 4

3

子控制器范围是其父控制器范围的原型后代。这是 Angular 的一个有意的特性。子范围可以访问父级的状态，但反之则不行。

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

于 2013-10-23T20:17:54.847 回答
1

您显示的代码显然过于抽象，无法为您提供更具体的答案，但重要的是要注意子控制器扩展其父级的行为（作为 OOP 中的父级的子类）。

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

于 2013-10-23T20:19:08.523 回答
0

为什么不让您的子文本区域使用不同的模型，并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的那些。

于 2013-10-23T20:16:01.053 回答
0

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

于 2013-10-23T20:27:44.677 回答