Implementing the Comment View

As discussed in the previous section, the comment thread section of the page uses ng-include to include the comment.html partial, shown in Listing 27.13, for each reply in the comment object replies array.

By using a partial template here, you can nest replies inside replies by simply reading the same block, shown below, to iterate through replies using ng-repeat and using ng-include to include the same form:

Click here to view code image

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

The comment.html partial template includes the comment username, subject, timestamp, and body. An <input> button toggles reply to true, allowing the reply form to be displayed. (It is currently hidden using ng-show.) The reply form, shown in Figure 27.6, is similar to the one for adding the first comment. The Reply button executes the addReply() method in the scope and passes comment._id, replySubject, and replyBody to the controller to send the add request to the server.

Figure 27.6 Replying to a comment already in the thread.

Figure 27.6 shows the rendered reply thread view before the Reply button is clicked and the reply form that opens after the Reply button is clicked.

Listing 27.13 comment.html: Implementing the partial comment template

Click here to view code image

01 <span class="username">{{comment.username}}</span>:
02 <span class="subject">{{comment.subject}}</span>
03 <p class="timestamp"
04 >posted {{comment.timestamp|date:"MMMM d yyyy H:mm"}}</p>
05 <p class="commentBody">{{comment.body}}</p>
06 <input type="button" ng-show="reply==false"
07        value="Reply" ng-click="reply=true"></input>
08 <form ng-if="reply">
09   <label>Subject</label>
10   <input type="text" ng-model="replySubject"></input>
11   <label>Comment</label>
12   <textarea ng-model="replyBody"></textarea>
13   <input type="button" value="Send"
14          ng-click="addReply(comment._id,replySubject,replyBody)" />
15 </form>
16 <input type="button" ng-show="reply==true"
17        value="Cancel" ng-click="reply=false;"></input>
18 <div ng-repeat="comment in comment.replies"
19      ng-init="reply=false;replySubject='';replyBody=''">
20   <div class="comment" ng-include="'/static/comment.html'"></div>
21 </div>