AngularJS意外共享范围

Question

I'm having a problem in AngularJS where my parent controller and child controller are sharing the same model. In this examples, there is recursive comments:

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

1st question....am I doing it wrong? And my second is there a way to make sure the parent and child scopes with ng-model do not affect each other?

Answer 1

Child controller scopes are prototypical descendants of their parent controllers' scopes. It's an intentional feature of Angular. The child scope has access to the parent's state, but not the other way around.

If you don't want this behaviour there are a couple of options - either don't use nested controllers (you can use custom services to share data where you need to, which is more test friendly and therefore considered best practice), or, more simply, just call the parent and child scope fields different names.

Answer 2

The code that you show is clearly too abstract to give you a more concrete answer, but it's important to notice that a child controller extends the behaviour of its parent (as a child class with its parent in OOP).

Therefore, a same variable should play the same role in a child controller and in its parent. If you want a different behaviour, you should use another name.

Answer 3

Why not just make your child text area use a different model, and have sendComment take an argument for which comment to accept?

<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)" />

Otherwise, you could create a directive that uses an isolate scope. Try a tutorial that goes over isolate scopes and directives, or whatch a screencast, such as those from egghead.io .

Answer 4

I would take joews second answer and not use nested Controllers, you don't need to. It's best practice to keep these separate. Generally each "page" would have it's own controller that dictates that pages functionality. You can use services and other angularjs resources to make sure you aren't rewriting code all the time.