當我使用angularJS ng-repeat時，它不顯示我在javascript中添加的內容

Question

在HTML中，我想要顯示多行項目（任務時間軸）。 在每一行中，甘特圖項，甘特圖用於繪製一年365天內顯示的365個小方框，這些小方框呈現爲 。 並且每一行都需要顯示一個藍色塊，這意味着該任務的分配週期。 {{timeline（item.data.sDate，item.data.eDate）}}，每行只包含一個藍色塊。

HTML

<ul> 
    <li ng-repeat="item in items.entities"> 
    <ul class="gantt-items" style="width: 9150px; height: 35px" > 
     <li class="gantt-item" >    
      <ul class="gantt-days"> 
      </ul>  
     </li>   
     </ul> 
    {{timeline(item.data.sDate,item.data.eDate)}} 
    </li> 
</ul> 

JS

angular.module('myApp', ['ngResource']); 
    function MainCtrl($scope,$resource){ 
     $(document).ready(function(){ 
     ... 
     for(var i = 1; i < 366; i++){ 
      $(".gantt-item ul.gantt-days").append('<li class="gantt-day" style="width: 25px"><span style="line-height: 35px; height: 35px">' + year + "-" + d.getMonth() + "-" + d.getDate() + '</span></li>'); 
      d = new Date(d.getTime() + (24 * 60 * 60 * 1000)); 
     } 
     ...}); 

$scope.timeline = function GetLength(startDate, endDate){ 
    var firstDay = new Date(new Date().getFullYear(), 0, 1); 

    var st1 = startDate.split("/"); 
    var dt1 = new Date(st1[2], st1[1] - 1, st1[0]); 

    var st2 = endDate.split("/"); 
    var dt2 = new Date(st2[2], st2[1] - 1, st2[0]); 

    var startPoint = ((dt1.getTime() - firstDay.getTime())/1000/60/60/24)*25; 
    var length = (1+(dt2.getTime() - dt1.getTime())/1000/60/60/24)*25; 
    $(".gantt-item ul.gantt-days").append('<span class="gantt-block" style="left:' + startPoint + 'px; width: ' + length + 'px; height: 27px"><strong class="gantt-block-label">Duration</strong></span>'); 
}; 

當我使用NG-重複，$（ 「甘特項ul.gantt天」） .append不起作用。 時間軸（item.data.sDate，item.data.eDate）在每行中重複n次， 假設每個原始行只顯示一個項目n行。

Answer 1

這是因爲ng-repeat指令中的元素出現在DOM編譯之後。
嘗試使用$watch：

$scope.$watch('items.entities', function(){ 
    for(var i = 1; i < 366; i++){ 
     $(".gantt-item ul.gantt-days").append('<li class="gantt-day" style="width: 25px"><span style="line-height: 35px; height: 35px">' + year + "-" + d.getMonth() + "-" + d.getDate() + '</span></li>'); 
     d = new Date(d.getTime() + (24 * 60 * 60 * 1000)); 
    } 
});