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>
            <display-Thumbnail />
        </div>   
        <div>
        <display-link />
    </div>
</div>

CSS

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

.submodule-size{
    max-width:750px;
    max-height:1250px;
}
.thumbnail-size{
    max-width:30%;
    max-height:30%;
    margin:1% 1% 1% 1%;
    padding: 0.5%;
    background:black;
}
.thumbnail-margin-left{
    float: left;
}
.thumbnail-margin-right{
    float: right;   
}

JavaScript

var demo = angular.module('demo', []);
demo.directive('displayLink', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<a href="#"></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,
         scope: { },
        template: '<div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://www.photoshopbuzz.com/wp-content/uploads/2010/04/button-3.jpg" class="thumbnail-size thumbnail-margin-left" alt="Smiley face"></a><div>',
        link: function (scope, element, attrs, controller) {
           // var moduleLink_ = "Know More";
           // element.text(moduleLink_);
             scope.value = 0;
            scope.increment = function() {
                alert("Image ID:"+scope.value++);
            }
        }
    }
});
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';
};