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:
<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 shows the rendered reply thread view before the Reply button is clicked and the reply form that opens after the Reply button is clicked.
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>