角1.5指令循環問題重複第一個元素

Question

參照本plunker： https://plnkr.co/edit/kBoDTXmm2XbxXjpDA4M9?p=preview

我想創建一個指令，採用JSON對象的數組，語法高亮顯示他們和該語法在頁面突出顯示的元素。

我用不同的觀看方法得到了不同的結果，但是我無法弄清楚這個問題是爲什麼相同的ID：1爲什麼不顯示id：1，id：2，id ：2，ID：3等

angular.module("ngjsonview",[]).directive('ngjsoncollection',['$sce', function(){ 
    'use strict'; 
    return { 
     transclude: false 
     ,restrict:'E' 
     ,scope:{ d:'=',o:"=" } 
     ,templateUrl: "./template.htm" 
     ,controller:function($scope,$sce){ 
      var fnPretty = function(objData){ 
       if (typeof objData != 'string') { var strOut = JSON.stringify(objData, undefined, 2); } 
       strOut = strOut.replace(/&/g, '&') 
        .replace(/</g, '&lt;') 
        .replace(/>/g, '&gt;'); 
       return strOut.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { 
        var cls = 'number'; 
        if (/^"/.test(match)) { 
         if (/:$/.test(match)) { cls = 'key';} 
         else { cls = 'string'; } 
        } else if (/true|false/.test(match)) { cls = 'boolean';} 
         else if (/null/.test(match)) {cls = 'null'; } 
        return '<span class="' + cls + '">' + match + '</span>'; 
       }); 
      }; 

      $scope.html=$sce.trustAsHtml(fnPretty($scope.d)); 

      $scope.$watchCollection('d',function(arrData){ 
       $scope.arrHTML=[]; 

       for (var i = 0, len = arrData.length; i < len; i++) { 
      $scope.arrHTML.unshift($sce.trustAsHtml(fnPretty(arrData[i]))); 
     } 
      }); 
     } 
    }; 

}]); 

Answer 1

移動超時成一個函數幫助與具體問題，我

$scope.arrData=[]; 
function addIt(x) { 
    $timeout(function(){ 
     $scope.arrData.push({id:x}); 
    }, 100); 
} 
for(var i=0; i < 100; i++){ 
    addIt(i) 
}