Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

by Henry

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>Get Care Module</h3>

    <div ng-controller='MyCtrl'>{{name}} .</div>
    <br>
    
    <div>
        <display-Thumbnail />
    </div>
        <div>
        <display-link />
    </div>
        <div>
            <div>
	  <p class="well" ng-repeat="data in moduledata">Hi : {{data.description}}</p>
	</div>
        </div>
</div>

CSS

.submodule-border{
 border-style:solid;
    border-color:black ;
    border-width:1px 1px 1px 1px;
}

.submodule-size{

    max-width:200px;
    max-height:400px;

}
.thumbnail-size{
    max-width:98%;
     max-height:98%;
    padding:1%;
    background:black;
}

JavaScript

var demo = angular.module('demo', []);
demo.directive('displayLink', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<a href="#" onclick="Redirect_Page()"></a>',
        link: function (scope, element, attrs, controller) {
            var knowmoreLink_ = "Know More";
            element.text(knowmoreLink_);
        }
    }
});

demo.directive('displayThumbnail', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<div class="submodule-size"><a href="#" onclick="LeavingThis_Page()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size" alt="Smiley face"></a></div>',
        link: function (scope, element, attrs, controller) {
           // var moduleLink_ = "Know More";
           // element.text(moduleLink_);
        }
    }
});

function LeavingThis_Page(){
    alert("From Module link");
}

function Redirect_Page() {
    alert("Leaving single page application");
}

function MyCtrl($scope) {
    // Module Name
    $scope.name = 'Data is going to be from CMS. About Each sub modules';
};