Angular.js Example: Directive

by jazahn

HTML

<div ng-app="app">
    <clock format="HH:mm:ss"></clock>
</div>

JavaScript

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

app.directive('clock', ['dateFilter', '$timeout', function(dateFilter, $timeout){
    return {
        restrict: 'E',
        scope: {
            format: '@'
        },
        link: function(scope, element, attrs){
            var updateTime = function(){
                var now = Date.now();
                
                element.html(dateFilter(now, scope.format));
                $timeout(updateTime, now % 1000);
            };
            
            updateTime();
        }
    };
}]);