Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

by sramnan

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
    <h3>Greeting</h3>
    <p ng-controller='MyCtrl'>Hi, it's {{name}}. 
        The current time is <display-time></display-time>.</p>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            element.text(currentDate.toTimeString());
        }
    }});

function MyCtrl ($scope) {
    $scope.name = 'Ken';   
    $scope.myTime = new Date();  // now    
};