AngularJS [无限摘要周期]中无限嵌套注释的渲染视图

Question

I'm currently trying to infinitely nested comments (and their replies), similar to Reddit.

I currently have a large structure of the general form:

[
    {
        comment_id: 1
        comment_text: "root1"
        replies:[
            {
                 comment_id: 2
                 comment_text: "reply1",
                 replies: [
                      ....
                 ]
            }   
        ]
    },
    {
        comment_id: 3
        comment_text: "root2"
        replies:[
              ...
        ]
    },
]

Since all comments follow a general div template and their replies are just margin-left:50px; additional, I followed this tutorial that uses recursive ng-repeat and recursively includes the template and their replies

http://benfoster.io/blog/angularjs-recursive-templates

So my code is like this in HTML:

<script type="text/ng-template" id="commentTree">
    <div>
        <img ng-src="{{comment.author.avatar}}" style="height:50px;">
        <a ng-href="/user/{{comment.author.user_id}}">{{comment.author.username}}</a>
        <br/>
        <small><strong>Posted</strong> <span am-time-ago="comment.date_posted"></span></small>
        <p>
            {{comment.comment_text}}
        </p>
        <span style="margin-right:5px;">
            <a href ng-click="comment.show_reply_box = true;" ng-show="!comment.show_reply_box">
            Reply
            </a>
            <div ng-show="comment.show_reply_box">
                <textarea ng-model="comment.possible_reply" class="form-control" rows="3" placeholder="Write your reply here..."></textarea>
                <span style="margin-right:10px;"><button class="btn btn-default btn-sm" ng-click="vm.post_comment(comment, comment.possible_reply)">Comment</button></span>
                <button class="btn btn-default btn-sm" ng-click="comment.show_reply_box = false;">Cancel</button>
            </div>
        </span>
    </div>
    <hr>
    <div ng-repeat="comment in comment.replies" ng-include="'commentTree'" style="margin-left:50px;">
    </div>
</script>

    <div ng-repeat="comment in comment.replies" ng-include="'commentTree'" style="margin-left:50px;">
    </div>

However, the problem is that ng-repeat is extremely badly optimized and I am getting infdig error cycles due to the nested ng-repeat s I am having. This is weird, as I'm certain it's not being caused by the number of comments I have, but rather the fact that I have nested ng-repeats . However, it does provide extremely helpful data-binding. I would like ot continue using ng-repeat or at least maintaining two-way data binding in some form, but avoid this infdig cycle. Does anyone have any ideas on what the best practices are infinitely nested comments or how to optimize AngularJS for this?

Answer 1

It looks like you are missing the ng-if wrapping the ng-repeat within your template.

change:

 <div ng-repeat="comment in comment.replies" ng-include="'commentTree'" style="margin-left:50px;">
</div>

to:

<div ng-if="comment.replies.length">
    <div ng-repeat="comment in comment.replies" ng-include="'commentTree'" style="margin-left:50px;">           
    </div>
</div>

Note, this assumes an empty array for replies if there are no replies. If there are no replies and an empty reply array isn't added, the code should be:

<div ng-if="comment.replies">
    <div ng-repeat="comment in comment.replies" ng-include="'commentTree'" style="margin-left:50px;">           
    </div>
</div>

Example: https://plnkr.co/edit/B99uT2VBAKwpHzevjqip?p=preview