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

我在理解'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>

最佳答案

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

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

以下指令将删除<double>, </double>, <ntimes ...>和</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());
        }
    }
});​

Fiddle

我使用编译功能而不是链接功能，因为似乎只需要模板DOM操作即可。

更新:我更喜欢ntimes编译功能的这种实现:

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