Angular JS Time Directive

by scyrizales

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<div ng-app="time">
  <div ng-controller="Ctrl2">
      Date format: <input ng-model="format" /> <hr/>
    Current time is: <span data-my-current-time="format" mi-atributo="Sergio"></span>
      <div>{{propiedadPrueba}}</div>
  </div>
</div>

JavaScript

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

time.controller('Ctrl2', ['$scope', function ($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}]);

time.directive("myCurrentTime", function(dateFilter){
    return {
        restrict: "EACM",
        link: function(scope, element, attrs){
            var format;
            
            scope.$watch(attrs.myCurrentTime, 
                function(value) {
                    format = value;
                    updateTime();
                });
            
            scope.propiedadPrueba = attrs.miAtributo;
            
            function updateTime(){
                var dt = dateFilter(new Date(), format);
                element.text(dt);
            }
            
            function updateLater() {
                setTimeout(function() {
                  updateTime(); // update DOM
                  updateLater(); // schedule another update
                }, 1000);
            }
            
            updateLater();
            
            //alert(scope.nuevoatributo);
        },
        scope: {
            nuevoatributo: "@miAtributo",
            format: "="
        }
    }
});