AngularJS Tutorial - Repeatedly Rendering Directive's DOM Node Children

The following code shows how to repeatedly Rendering Directive's DOM Node Children.

Example


<!doctype html>
<html ng-app="MyApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
var app = angular.module("MyApp", []);
<!--from w w  w  .jav  a  2 s.  c o m-->
app.directive("repeatNtimes", function() {
  return {
    restrict: "E",
    compile: function(tElement, attrs) {
      var content = tElement.children();
      for (var i=1; i<attrs.repeat; i++) {
        tElement.append(content.clone());
      }
    }
  };
});    
    </script>
  </head>
  <body>
    <repeat-ntimes repeat="5">
      <h1>Header 1</h1>
      <p>This is the paragraph.</p>
    </repeat-n-times>
  </body>
</html>

The code above is rendered as follows: