Question

我想创建一个不需要ngRepeat的指令，因为指令上有一些额外的功能，这对ngRrepeat不起作用。

这是我的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是另一个使用ngRepeat中的items值的指令：

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

没有ngRepeat：

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

有些人可以举个例子，我正在努力解决这个问题。

代码示例： http://jsfiddle.net/mato75/4zhLtjbw/

不工作的例子： http://jsfiddle.net/mato75/ztLhpf2g/

编译并附加ngIncluded模板，但问题是，它只编译最后一个模板，因为摘要周期会变慢。

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);
});

Answer 1

您需要为每个li手动创建一个自己的范围，因此每个项目都有自己的数据。

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);

创建没有ngRepeat的列表

1 个答案: