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 ，或者根本不應該使用。 請參閱文檔中的警告。 頁面加載時獲取數據應在控制器中完成，而無需模板。