JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="MyApp">
    <div titlebar="">
        
    </div>
</div>    
<br/>
<button id="myBtn">My Test</button>

JavaScript

var myApp = angular.module("MyApp", []);
myApp.directive('titlebar', function(){
    return {
        scope: true,
        restrict:"EA",
        template:"<span>{{myText}}</span>",
        controller: function($scope){
            $scope.myText = "12345678"; 
            $scope.myFunc = function(){
                alert('This is a function inside controller');
            }
        },
        link: function(scope, element, atrrs){
             
        }
    };
});


//This is too get scope outside of angular controller/service/directive
//with a hacky way to do that.
var $injector =angular.injector(['ng','MyApp']);
var html = "<div titlebar=''></div>";
$injector.invoke(function($compile, $rootScope){
    var $scope = $rootScope.$new();
    var result= $compile(html)($scope);
    var cScope = result.scope(); // This is scope in directive controller. :  )
    
    var myBtn = document.getElementById('myBtn');
    myBtn.addEventListener('click', cScope.myFunc);
});