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:1px 1px 1px 1px;
}

.submodule-size{
    max-width:750px;
    max-height:1250px;
}
.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="#"></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://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_);
             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';
};