Рендеринг представления бесконечно вложенных комментариев в AngularJS [бесконечный цикл дайджеста]

Question

В настоящее время я пытаюсь бесконечно вложенные комментарии (и их ответы), похожие на Reddit.

Я в настоящее время имеют большую структуру общего вида:

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

Поскольку все комментарии следовать общему div template и их ответы только margin-left:50px; дополнительные, я последовал за этот учебник, который использует рекурсивный ng-repeat и рекурсивно включает шаблон и их ответы

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

Так что мой код, как это в 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> 

Однако, проблема заключается в том, что ng-repeat очень плохо оптимизировано, и я получаю infdig циклов ошибки, связанные с вложенными ng-repeat с я имею. Это странно, поскольку я уверен, что это не вызвано количеством комментариев, которые у меня есть, а скорее тем фактом, что я вложил ng-repeats. Однако он обеспечивает чрезвычайно полезную привязку данных. Я бы хотел, чтобы ot продолжал использовать ng-repeat или, по крайней мере, поддерживал двустороннюю привязку данных в той или иной форме, но избегал этого цикла infdig. Есть ли у кого-нибудь идеи о том, какие лучшие практики представляют собой бесконечно вложенные комментарии или как оптимизировать AngularJS для этого?

Answer 1

Возможно, вам не хватает ng-if обертывания ng-repeat в вашем шаблоне.

изменение:

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

к:

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

Заметим, что это предполагает пустой массив для ответов, если нет ответов. Если нет ответов и пустой массив ответа не добавил, код должен быть:

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

Пример: https://plnkr.co/edit/B99uT2VBAKwpHzevjqip?p=preview