how to write a 'double' and a 'ntimes' directive for angularjs?

Question

I am having trouble understand the 'ngRepeat' directive so I wish to learn how angularjs works by writing a 'double' directive and then extending with an 'ntimes' directive: so

'double'

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

would result in producing:

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

'ntimes'

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

would result in producing:

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

Mark Rajcok · Accepted Answer · 2012-12-20T19:56:03.790

28

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

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

The directives below will remove the <double>, </double>, <ntimes ...> and </ntimes> tags:

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

I used a compile function rather than a linking function because it seemed like only template DOM manipulation was required.

Update: I like this implementation of the ntimes compile function better:

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

edited Dec 20 '12 at 19:56

answered Dec 14 '12 at 05:18

Mark Rajcok

362,217
114
495
492

In the original samples, why is there tElement.replaceWith in the end? Isn't tElement already the same before replaceWith? – mr_eko Sep 14 '13 at 08:06
1

@mr_eko The `tElement.replaceWith` replaces the element with it's children. So `
Hello World - 2
` would become `
Hello World - 2
Hello World - 2
` ( is replaced). – yndolok Dec 15 '13 at 00:40
very nice examples as usage of compile function – Khanh Nguyen Aug 22 '14 at 04:25
why don't the directives work without using clone? it seems when i log out content.clone and content they are the same thing – WinchenzoMagnifico Feb 19 '16 at 16:24
@Mark Rajcok I 've modified your sample a little bit, adding some attribute directive to content of `double` directive. Here is link http://jsfiddle.net/wjkv83ta/ And got strange behaviour: first element are not parsed correctly. You can see it, because anly second element bacome red. – DotNetter Jul 12 '16 at 14:16

score 6 · Answer 2 · answered Dec 13 '12 at 15:24

6

The ng-repeat directive is mainly used to iterate over items on lists/arrays/collections (i.e. ng-repeat="item in list") and does much more than simply cloning elements. Please take a look at angularjs ng-repeat directive documentation.

If you really just want to clone elements, try something like this: http://jsfiddle.net/hp9d7/

answered Dec 13 '12 at 15:24

bmleite

26,850
4
71
46

Thanks! I just realised though that you used the link phase to add elements. Is it possible to do it with bindings as well? – zcaudate Dec 13 '12 at 22:02

how to write a 'double' and a 'ntimes' directive for angularjs?

'double'

'ntimes'

2 Answers2

Hello World - 2

Hello World - 2

Hello World - 2

Linked