Подтвердить что ты не робот

Как написать директиву "double" и "ntimes" для angularjs?

Мне трудно понять директиву "ngRepeat", поэтому я хочу узнать, как работает angularjs, написав "двойную" директиву, а затем расширяя директиву "ntimes": так

'двойной'

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

Ответ 1

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

Ответ 2

Директива ng-repeat в основном используется для перебора элементов в списках/массивах/коллекциях (т.е. ng-repeat="item in list") и делает гораздо больше, чем просто элементы клонирования. Пожалуйста, взгляните на angularjs документацию по документации ng-repeat.

Если вы действительно хотите клонировать элементы, попробуйте что-то вроде этого: http://jsfiddle.net/hp9d7/