创建无ngRepeat名单 [英] Create a list without ngRepeat

问题描述

我想创造一个指令，不需要ngRepeat，因为在指导一些额外的功能，即不玩好与ngRrepeat。

这是我的NG-重复指令：

 ＆LT; D​​IV＆GT;
＆LT; UL＆GT;
    ＆LT;李NG重复=中的项项跟踪由$指数NG-CLASS =attrs.itemTheme数据项={{项目[attrs.itemId]}}＆GT;
        ＆LT; D​​IV NG-包括=attrs.tpl＆GT;＆LT; / DIV＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

attrs.tpl，NT-尺寸是另一种指令，从ngRepeat使用的项目值：

 ＆LT;脚本类型=文/ NG-模板ID =维项目-tpl.html＆GT;
    ＆LT;格NT-尺寸X-ATTRS =项＆GT;＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

无ngRepeat：

 ＆LT; D​​IV＆GT;
   ＆LT; UL＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

能否一些请给我一个例子，我不干这个挣扎。

code的例子：
http://jsfiddle.net/mato75/4zhLtjbw/

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

得到了编译和追加ngIncluded模板，但问题是，它编译只有最后一个，因为消化周期将放缓。

  VAR EL = jqElm.find（'UL'）;
scope.attrs.list.forEach（功能（VL）{
    VAR TMP =
        '＆LT;李班=+ attrs.itemTheme +'数据项=+ vl.id +'＆GT;' +
            '＆LT; D​​IV NG-包括=\\''+ attrs.itemTpl +\\'＆GT;＆LT; / DIV＆GT;' +
                '＆LT; /李＆GT;';    scope.item = VL; //这是减缓:(    变种B = $编译（TMP）（范围）;
    el.append（二）;
}）;
 

解决方案

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

 变种UL = jqElm.find（'UL'）;scope.list.forEach（功能（VL）{
VAR李='＆LT;立GT;＆LT; D​​IV NG-包括=\\项，tpl2.html \\'＆GT;＆LT; / DIV＆GT;＆LT; /李＆GT;';
VAR newscope的范围= $新的（）。
newScope.item = VL;
VAR CLI = $编译（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名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！