JSFiddle - React, Tailwind, and code Playground

by Mohammad Gouse

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>



</head>
<body>

<div ng-app="customDirectives" >
    <div> <span id="spanclick" custom-popover popover-html="Some Popover Text" popover-placement="bottom" popover-label="Label"></span>
    </div>
</div>
</body>
<script>

app = angular.module('customDirectives', []);

app.directive('customPopover', function ($compile,$timeout) {
    return {
        restrict: 'A',
        scope:true,
        template: '<span>{{Mdata}}</span>',
        link: function (scope, el, attrs) {

        	scope.Mdata="Hello";
        	scope.switcher1=true;
            scope.mbutton='Edit';

            scope.fnhidePopup=function(){
            //	 $('.popover').hide();
    	       // scope.switcher1=true;
              //  $( "label" ).on( "click",scope.fnhidePopup());
                $("#spanclick").trigger( "click" );
            }

            scope.fnBtClick=function(){
                console.log('fnBtClick called' + scope.btshow);

                if(scope.switcher1 == true)
                {
                  scope.mbutton="Save";
                  $timeout(function(){
                      $('input')[0].focus();
                  });
                }
                else
                {
	               scope.mbutton="Edit";
                   $( "label" ).on( "click",scope.fnhidePopup());

                }
                scope.switcher1=!scope.switcher1;
         	};

        	scope.label = attrs.popoverLabel;
        	scope.txtbx='<label ng-model=Mdata ng-show=switcher1>{{Mdata}}</label> <input type=text ng-show=!switcher1 ng-model=Mdata ng-value=Mdata></input>'+
        	'<button class="btn btn-primary" ng-model=mbutton ng-click=fnBtClick() >{{mbutton}}</button>';
			scope.elm = $compile( scope.txtbx )(...