Create a list without ngRepeat

问题

I would like to create a directive, that does not need ngRepeat, because there is some additional functionality on the directive, that doesn't play good with ngRrepeat.

This is my directive with ng-repeat:

<div>
<ul>
    <li ng-repeat="item in items track by $index" ng-class="attrs.itemTheme" data-item="{{ item[attrs.itemId]}}">
        <div ng-include="attrs.tpl"></div>
    </li>
</ul>
</div>

attrs.tpl, nt-dimension is another directive, that uses the items values from ngRepeat:

<script type="text/ng-template" id="dimension-item-tpl.html">
    <div nt-dimension x-attrs="item"></div>
</script>

Without ngRepeat:

<div> 
   <ul></ul>
</div>

Can some please give me an example, I am quit struggling with this.

Example of code: http://jsfiddle.net/mato75/4zhLtjbw/

Not working example: http://jsfiddle.net/mato75/ztLhpf2g/

Got to compile and append the ngIncluded template, but the problem is, that it compiles only the last one, because the digest cycle is to slow.

var el = jqElm.find('ul');
scope.attrs.list.forEach(function (vl) {
    var tmp = 
        '<li class="' + attrs.itemTheme + '" data-item="' + vl.id + '">' +
            '<div ng-include="\'' + attrs.itemTpl + '\'"></div>' +
                '</li>';

    scope.item = vl; // this is to slow :(

    var b = $compile(tmp)(scope);
    el.append(b);
});

回答1:

You need to manually create an own scope for each li, so each item has its own data.

var ul = jqElm.find('ul');

scope.list.forEach(function (vl) {
var li = '<li><div ng-include="\'item-tpl2.html\'"></div></li>';
var newScope = scope.$new();
newScope.item = vl;
var cLi = $compile(li)(newScope);
ul.append(cLi);

来源：https://stackoverflow.com/questions/25568581/create-a-list-without-ngrepeat