提高内含ng-ng的ng-repeat的速度

时间:2014-01-01 07:16:21

标签: angularjs angularjs-ng-repeat

我正在使用带有div的ng-repeat,在json数组中使用ng-include来区分包含相同模板的范围,但这种方法在数组大小增加时减慢了页面的加载速度。任何人都可以建议一种提高渲染速度或替代方法的方法吗?我的方法以小提琴为例。

<script type="text/ng-template" id="/toBeIncluded.html">
    This is a partial with something unique:
    <input ng-model="partialVar.val" />
</script>

<div ng-controller="MyCtrl">
    <div ng-repeat="partialVar in partialStuff">
        <div ng-include src="'/toBeIncluded.html'">    
        </div>
    </div>
    <button ng-click="getValues()">Values</button>
    <div>{{fvalues}}</div>
</div>

fiddle showing my problem

1 个答案:

答案 0 :(得分:2)

您可以使用 $ timeout 来提高速度。

将您的数组放在 $ timeout 中,以便通过在块中包含模板来更新视图。虽然它需要花费尽可能多的时间,但它不会提升您的浏览器。见下面的方法。

<强> CODE

var partialStuff = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n"];
$scope.partialStuff = [];

for(var i=0;i<partialStuff.length;i++)
{
    (function(index) {
        $timeout(function() {
            $scope.partialStuff.push(partialStuff[index]);
        },20);
    })(i);
}

希望它有所帮助。