JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveAPP">
    <div ng-controller="directiveController">
        <light-box image-src="src" image-title="title"></light-box>
    </div>
    <light-box image-src="src" image-title="title"></light-box>
</div>

JavaScript

angular.module("directiveAPP", [])
    .controller("directiveController", function ($scope, $rootScope) {
    $rootScope.src = "http://picbook.in/wp-content/uploads/2014/07/image_123.jpg";
    $rootScope.title = "hai";
}).directive("lightBox", function () {
    return {
        restrict: 'E',
        template: '<div><img src="{{imageSrc}}" title="{{imageTitle}}" width="100px" style="border:solid #ddd 1px;" /></div>',
        scope: {
            imageSrc: '=',
            imageTitle: '='
        }
    };
});