Implementing the Comment Thread View

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 The comment thread area with the Add Comment button and a form to add a comment.

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:

Click here to view code image

<div ng-repeat="comment in commentThread.replies"
     ng-init="reply=false;replySubject='';replyBody=''">
  <div class="comment" ng-include="'/static/comment.html'"></div>
</div>

Listing 27.12 comment_thread.html: Implementing the comment thread template

Click here to view code image

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>