JSFiddle - React, Tailwind, and code Playground

by jasenhk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController as mainCtrl">
    <div>{{mainCtrl.title}}</div>
    <button ng-click="mainCtrl.kungfoo()">Kung Foo</button>
    <foo url="/foo"></foo>
</div>

CSS

.foo {
    margin: 5px;
    border: 1px solid red;
}

button {
    margin: 5px;
}

JavaScript

angular.module("app", [])
.controller("MainController", function() {
    this.title = "Main Controller";
    this.kungfoo = function() {
        console.log("mainCtrl:kungfoo");
    };
})

.directive("foo", function() {    
    var template = '<div class="foo" data-url="{{ctrl.url}}"><div>{{ctrl.foobar}}</div><button ng-click="ctrl.toggle()">Start Training</button><button ng-disabled="ctrl.isDisabled">Button To Disable</button></div>';
    
    return {
        restrict: "E",
        scope: {
            foobar: "@",
            url: "@",
            //toggle: "&"
        },
        link: function(scope, element, attrs, ctrl) {
            ctrl.init();
        },
        controller: "DirectiveController as ctrl",
        template: template,
        bindToController: true
    };
})

.controller("DirectiveController",
function($scope, $timeout, KungFooService) {
    var _this = this;
    this.url = "";
    this.isDisabled = true;
    this.foobar = "I know kung foo";
    this.svc = null;
    
    this.init = function() {
        _this.svc = new KungFooService(_this.url);
        _this.svc.onTrainingComplete($scope, _this.trainingCallback);
    };
    
    this.toggle = function() {
        _this.svc.startTraining();
    };
        
    this.trainingCallback = function(data) {
        // $apply necessary when isDisabled change
        // initiated by outside service
        $scope.$apply(function() {
            console.log("trainingCallback");
            _this.isDisabled = !(_this.isDisabled);
        });
    };
})

.service("KungFooService", function($timeout, $rootScope) {
    var KungFooService = function(url) {
        var _this = this;
        var TRAINING_COMPLETE = "trainingComplete";
        this.url = url;
                
        this.startTraining = function() {
            $timeout(function() {
                console.log(_this.url);
                $rootScope.$broadcast(TRAINING_COMPLETE, {});
            }, 1000);
        };
       ...