JSFiddle - React, Tailwind, and code Playground

Angular ng-repeat with compile timeout delay effect

by Andrew Pougher

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<body ng-app="MyApp">
<h1>{{message}}</h1>
  <repeat-ntimes repeat="10" class="gallery">
    <div class="cube animated col-xs-6 thumbnail">Header 1 <p class="animated">This is the paragraph.</p></div>
   
  </repeat-n-times>
</body>

JavaScript

var app = angular.module("MyApp", []);

app.directive("repeatNtimes", function($rootScope, $timeout,$interval) {
  return {
    restrict: "E",
    compile: function( tElement, attrs) {
    console.log(attrs.repeat)
      var content = tElement.children();
      var c=0;
       var timer= $interval(function(){
   var w = (c > 1) ? 'times': 'time';
$rootScope.message="Gallery refreshed "+c+" " + w;

      for (var i=1; i<attrs.repeat; i++) {
    $timeout(function() { 
        tElement.append(content.clone().addClass("fadeInLeft"));
      },i*200);
      // comment this out to keep all appends
      var theGallery = angular.element( document.querySelector( '.gallery' ) );
			theGallery.empty(); 
      }
      c++;
      if(c===10) c = 0; // reset to 0
        if(c===4) $interval.cancel(timer); // stop at a given loop
},4000);

      return function (scope, element, attrs) {
    
        element.on("click", ".cube", function() {
          $(this).css({ "background-color": "red" }).toggleClass("fadeInUp bounce");
        });
      };
    }
  };
});