第一次單擊鏈接Angularjs時，數組不會加載嗎？

Question

// SETTING UP SERVICES

app.service("PictureService", function($http) {
  var Service = {};
  Service.pictureLinkList = [];

  // GETTING PICTURE LINKS FOR PAGE

$http.get("data/img_location.json")
 .success(function(data) {
  Service.pictureLinkList = data;
})
.error(function(data,status) {
  alert("Things went wront!");
});

Service.findImgById = function(id) {
  for(var item in Service.pictureLinkList) {
    if(parseInt(Service.pictureLinkList[item].id) === parseInt(id)) {
    return Service.pictureLinkList[item];
  }
 }
}

return Service;
});

// COMMENT SERVICE START*****************************************
app.service("CommentService", function($http) {
  var comService = {};
  comService.commentList = [];

// GETTING COMMENTS FROM JSON FILE

$http.get("data/comments.json")
  .success(function(response){
      comService.commentList = response;

      for(var item in comService.commentList){
        comService.commentList[item].date = new Date(comService.commentList[item].date).toString();
      }
  })
  .error(function(data,status){
      alert("Things went wrong!");
  });

comService.findCommentById = function(id) {
  var comArr = [];
  for(var item in comService.commentList) {
    if(parseInt(comService.commentList[item].imgId) === parseInt(id)) {
    comArr.push(comService.commentList[item]);
  }
}
return comArr;
};

return comService;
});


// Controller
app.controller("pictureDetails", ["$scope", "PictureService", "CommentService", "$routeParams",  function($scope, PictureService, CommentService, $routeParams) {
$scope.imgById = PictureService.findImgById($routeParams.id);
$scope.commentsById = CommentService.findCommentById($routeParams.id);
}]);

這是HTML：

<ul>
   <li ng-repeat="item in commentsById">
    <div class="panel panel-primary text-center"><h3>Posted by: {{    item.postedBy }} at </h3><p>{{ item.date }}</p></div>
    <div class="panel-body text-center">{{ item.comment }}</div>
  </li>

Comments.json文件：

 [
 {"id": 1, "imgId": 1, "comment": "Pretty good sketching there pal!", "date": "October 1, 2014 11:13:00", "postedBy": "John"},
 {"id": 2, "imgId": 1, "comment": "Nice one keep working on your skills", "date": "January 17, 2016 11:48:00", "postedBy": "John"}
]

首先，我剛剛開始使用Angularjs，並且非常喜歡將其作為框架。 問題是當我加載html頁面$ http服務時，將讀取json文件並返回分配給數組的對象。 然后，我使用ng-repeat遍歷數組並讀取值。

當我第一次加載頁面時，數組為空，我單擊鏈接，然后返回，然后數組和頁面被加載。 這是為什么？

如果我不清楚我的問題，請告訴我。 任何幫助是極大的贊賞。

Answer 1

$scope.$watch( function(){ return CommentService.commentList; }, function(comments) {
for(var item in comments) {
  if(parseInt(comments[item].imgId) === parseInt($routeParams.id)) {
    $scope.commentsById.push(comments[item]);
  }
}
console.log($scope.commentsById);
});
$scope.commentsById = [];

將這部分內容添加到工作的控制器中，正在讀一本有關Angularjs的書，他們像$ watch變量一樣監視任何給定的數組並將其分配給任何對象。

如果需要更多解釋，請告訴我。 現在它可以完美運行，我單擊一次即可加載評論。 一次嘗試加載整個注釋數組。