イメージ追加はng-repeatのディレクティブでは機能しません

Question

これはng-repeatを持つdivです。私は各ファイルのためにそれにイメージを追加しようとしています。

<div class = "fileslink" ng-repeat="file in files" id = "filegen" my-repeat-directive> 

.... ` は、これは、画像を作成し、ページのロード時に呼び出されます。

function filesInFolder(i){ 
       $scope.files = []; 
       $http.get("/restricted/getFileList?folder=" + i + "&withComments=True") 
       .then(function (response) { 
        if (response.data.status != 'Failed' && response.data != []){ 
         for (var j=0; j<response.data.length; j++){ 
          var newFile = {}; 
          newFile.fileName = response.data[j].fileName; 
          newFile.folder = i; 
          //alert("folder: " + newFile.folder); 
          newFile.comment = response.data[j].comment; 
          newFile.selected = false; 
          newFile.editingComment = false; 
          newFile.date = getDate(newFile.fileName, newFile.folder); 
          $scope.files.push(newFile); 
          var imageElem = document.createElement("img"); 
          imageElem.src = "/Additional%20Files/icons/" + fileType(response.data[j].fileName) + ".png"; 

          console.log(response.data[j].fileName); 
          imageElem.height = "37"; 
          imageElem.width = "31"; 
          imageElem.style.position = "absolute"; 
          imageElem.style.top = "7px"; 
          imageElem.style.left = "18px"; 
          imageElem.style.paddingBottom = "2px"; 
          imageElem.style.border = "2px solid black"; 
          console.log("name inside folder: " + response.data[j].fileName + ", src: " +imageElem.src); 

         } 
        } 
       }); 
      }; 

指令今の画像のみを示し

app.directive('myRepeatDirective', function() { 
    var boxes = document.getElementsByClassName("fileslink"); 
    //console.log(boxes.length); 
    return function(scope, element, attrs) { 
     for (var x = 0; x < boxes.length; x++) { 
      console.log("x: " + x + ", val: "); 
      boxes[x].appendChild(imageElement); 
     }; 
     angular.element(element).css('border', '2px solid red'); 
     if (scope.$last) { 
      window.alert("im the last!"); 
     } 
    }; 
}); 

非常に最初のファイル（インデックス0）で、他のファイルではありません。私はここで何が欠けていますか？

まだ角張っていないので、コードを書くより効率的な方法があれば、それは役に立ちます。

Answer 1

ng-repeatがすべての要素をレンダリングするまで待つ必要があります。そして、イメージ要素を追加する必要があります。すでにng-repeatがレンダリングを完了する条件を持っています。if(scope.$last)は、ng-repeatのすべての要素がレンダリングされたことを示す条件です。

指令

app.directive('myRepeatDirective', function() { 
    return function(scope, element, attrs) { 
     angular.element(element).css('border', '2px solid red'); 
     if (scope.$last) { 
      var boxes = document.getElementsByClassName("fileslink"); 
      window.alert("im the last!"); 
      console.log(boxes.length); //all element must be rendered 
      for (var x = 0; x < boxes.length; x++) { 
       console.log("x: " + x + ", val: "); 
       boxes[x].appendChild(imageElement); 
      }; 
     } 
    }; 
});