Question

指的是这个掠夺者： 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, '&amp;')
                    .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)
}

Angular 1.5指令循环问题重复第一个元素

1 个答案: