创建一个没有 ngRepeat 的列表

问题描述

我想创建一个不需要 ngRepeat 的指令，因为指令上有一些附加功能，与 ngRrepeat 不兼容.

这是我的 ng-repeat 指令:

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

attrs.tpl, nt-dimension 是另一个指令，它使用来自 ngRepeat 的 items 值:

没有 ngRepeat:

<ul></ul>

请给我举个例子，我已经不再为此苦苦挣扎了.

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

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

必须编译并附加 ngIncluded 模板，但问题是它只编译最后一个，因为摘要周期很慢.

var el = jqElm.find('ul');scope.attrs.list.forEach(function (vl) {无功 tmp ='<li class="' + attrs.itemTheme + '" data-item="' + vl.id + '">'+'<div ng-include="\'' + attrs.itemTpl + '\'"></div>'+'</li>';scope.item = vl;//这很慢:(var b = $compile(tmp)(scope);el.append(b);});

解决方案

您需要为每个 li 手动创建自己的作用域，因此每个项目都有自己的数据.

var ul = jqElm.find('ul');scope.list.forEach(函数(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);

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

解决方案

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

这篇关于创建一个没有 ngRepeat 的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！