ng-init调用函数，将数据提供给ng-repeat

Question

我正在尝试显示不同任务的注释。 所有任务都列在一页上。 注释应显示在每个任务下。

     <div class="panel-footer">
        <div class="comment_number">Comments : {{task["comments-count"]}}  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#commentBox{{task.id}}">[+]</button></div> 
        <div ng-init="findComments(task.id)" id="commentBox{{task.id}}" class="commentShow panel-body collapse">
            <ul>
                <li ng-repeat="comment in comments">
                    <div class="avatar"><img src="{{comment['author-avatar-url']}}"/> By {{comment["author-firstname"]}}</div>
                    <div class="commentContent">{{comment.body}}</div>
                </li>
            </ul>
        </div>
  </div>

如您所见，我正在尝试ng-init一个调用任务ID的函数。 请注意，该代码已经在另一个ng-repeat中，该代码使所有任务循环执行。

<li class="list-group-item" ng-repeat="task in myTaskfromList">
   ...... code above is actually here after task details..
</li>

问题是代码仅显示第一个循环的任务注释列表和注释内容。 它不显示其他任务注释，而是用第一个任务注释覆盖第二个任务注释位置。

现在我试图做到这一点

<li ng-init="findComments(task.id)" class="list-group-item" ng-repeat="task in myTaskfromList">

</li>

这什么也没显示。

这是我的控制器

//get comments from task
$scope.findComments = function(taskId) {
  $http.get("http://abounde.com/portal/api/task/"+taskId).then(function(response) {
    $scope.comments = response.data.comments;
  });
}

您能为我提供有效的解决方案吗？

Answer 1

那么，您有嵌套的ng-repeat块，并且每个块都在发出自己的xhr请求？ 这听起来效率特别低。 假设您可以控制要使用的其余API，那么如果您增加http://abounde.com/portal/api/task/来获取任务ID和然后一次遍历它们。

Answer 2

您真的不应该这样使用ng-init ，或者根本不应该使用。 请参阅文档中的警告。 页面加载时获取数据应在控制器中完成，而无需模板。