14

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>
zcaudate
  • 13,998
  • 7
  • 64
  • 124

2 Answers2

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

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