javascript - 如何为 angularjs 编写“double”和“ntimes”指令？

Question

我无法理解“ngRepeat”指令，因此我希望通过编写“double”指令然后使用“ntimes”指令扩展来了解 angularjs 的工作原理：所以

'双倍的'

<double>
 <h1>Hello World</h1>
</double>

将导致产生：

 <h1>Hello World</h1>
 <h1>Hello World</h1>

'ntimes'

<ntimes repeat=10>
 <h1>Hello World</h1>
</ntimes>

将导致产生：

 <h1>Hello World</h1> 
 .... 8 more times....
 <h1>Hello World</h1> 

Answer 1

<double>
 <h1>Hello World - 2</h1>
</double>

<ntimes repeat=10>
    <h1>Hello World - 10</h1>
    <h4>More text</h4>
</ntimes>

下面的指令将删除<double>, </double>, <ntimes ...>and</ntimes>标签：

var app = angular.module('app', []);
app.directive('double', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            var content = tElement.children();
            tElement.append(content.clone());
            tElement.replaceWith(tElement.children());
        }
    }
});
app.directive('ntimes', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            var content = tElement.children();
            for (var i = 0; i < attrs.repeat - 1; i++) {
                tElement.append(content.clone());
            }
            tElement.replaceWith(tElement.children());
        }
    }
});​

小提琴

我使用了编译函数而不是链接函数，因为它似乎只需要模板 DOM 操作。

更新：我更喜欢 ntimes compile 函数的这个实现：

compile: function(tElement, attrs) {
    var content = tElement.children();
    var repeatedContent = content.clone();
    for (var i = 2; i <= attrs.repeat; i++) {
        repeatedContent.append(content.clone());
    }
    tElement.replaceWith(repeatedContent);
}

Answer 2

该ng-repeat指令主要用于迭代列表/数组/集合（即ng-repeat="item in list"）上的项目，并且不仅仅是简单地克隆元素。请查看 angularjs ng-repeat 指令文档。

如果您真的只想克隆元素，请尝试以下操作：http: //jsfiddle.net/hp9d7/