AngularJS - Timeline ex.

by gavinfoley

HTML

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<div ng-controller="AppCtrl">
  <div ng-timeline="updateTimeline()" data-refresh="5" class="notification"></div> 
</div>

CSS

.notification {
  width: 300px;
  height: 100px;
  border: 1px solid black;        
}

.warn{
  color: red;
   
}

.info{
  color: green;
}

JavaScript

var app = angular.module('app', ['Timeline']);

app.controller('AppCtrl' , function ($scope){
    $scope.count = 0;
    $scope.updateTimeline = function(){
      return '<span class="info">message ' + ($scope.count++) + '</span><br/>';
    };
});
    

angular.module('Timeline', []).directive('ngTimeline', function() {
    return function(scope, element, attr){
        function updateTimeline(){
          element.prepend(scope.$apply(attr.ngTimeline));
        }
          function asyncUpdateTimeline(){    
             setTimeout(function() {
               updateTimeline(); 
               asyncUpdateTimeline();                 
             }, (1000 * parseInt(element.attr('data-refresh') || 1)));
          }
          asyncUpdateTimeline();
       };
    });