As discussed in the previous section, the photo and main mage sections of the photos page use ng-include
to include the comment_thread.html
partial template shown in Listing 27.12. You break out the partial template so that you can later easily include it in other pages or even additional sections of the same page.
The partial template includes the CommentThread
title, using {{commentThread.title}}
. An <input>
button toggles addComment
to true
, allowing the reply form to be displayed. (It is currently hidden using ng-show
.) Inside the reply form, the subject <input>
is defined, along with a comment body <textarea>
, as shown in Figure 27.5. The Add Comment button executes the addReply()
method in the scope and passes commentThread._id
, replySubject
, and replyBody
to the controller to send the add request to the server.
Figure 27.5 shows the rendered comment thread view before the Add Comment button is clicked and the reply form that opens after the Add Comment button is clicked.
At the bottom of the comment thread template, the following lines use ng-repeat
to load the comment.html
partial template that renders the comment using ng-include
. Also notice that the reply
, replySubject
, and replyBody
values are initialized. Those are used in the comment template to display/hide the reply form as well as to pass data to the addReply()
function:
<div ng-repeat="comment in commentThread.replies"
ng-init="reply=false;replySubject='';replyBody=''">
<div class="comment" ng-include="'/static/comment.html'"></div>
</div>
01 <span class="commentTitle">{{commentThread.title}}</span>
02 <input type="button" ng-show="addComment==false"
03 value="Add Comment" ng-click="addComment=true"></input>
04 <form ng-show="addComment==true">
05 <label>Subject</label>
06 <input type="text" ng-model="replySubject"></input>
07 <label>Comment</label>
08 <textarea ng-model="replyBody"></textarea>
09 <input type="button" value="Send"
10 ng-click=
11 "addComment=false; addReply(commentThread._id,replySubject,replyBody)"
12 ></input>
13 </form>
14 <input type="button" ng-show="addComment==true"
15 value="Cancel" ng-click="addComment=false;"></input>
16 <div ng-repeat="comment in commentThread.replies"
17 ng-init="reply=false;replySubject='';replyBody=''">
18 <div class="comment" ng-include="'/static/comment.html'"></div>
19 </div>