JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<div ng-app="hutStuff" ng-controller="c">
    
<show-box ng-show="showBox" open-handle="navigateToHomepage()">
        
</show-box>
    
    <button ng-click="showBox != showBox" >show</button>
    
    </div>

CSS

.stuf
{
   width : 100px;
    height:100px;
    background:#ddd;
}

JavaScript

var box = angular.module('hutInfoBox', []).directive('showBox',hutShowBox);


var mod = angular.module('hutStuff', ['hutInfoBox']);


mod.controller('c',function($scope){
    
    $scope.showBox = true;
    
    $scope.navigateToHomepage = function(str)
    {
    	alert(str);
    }
    
});




function hutShowBox()
{
	var obj = {
    	restrict : "E",
        scope : {
        	presentApp  : '=',
            openHandle : '&'
        },
        template : '<div class="stuf">hi<button ng-click=\"open()\">'+'open</button></div>',
        link : function(scope,element,params,controller)
        {
            scope.open = function()
            {
            	scope.openHandle()('hello');
            }
            
            
        }
    
    
    }

    return obj;
}