JSFiddle - React, Tailwind, and code Playground

by Edwin Dalorzo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<body ng-app="sample">
    <div ng-controller="MainCtrl">
        <div>
            <label for="jedi">Jedi Name:</label>
            <input name="jedi" type="text" ng-model="name" />
            <button ng-click="trigger()">Emit</button>
        </div>
        <table>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>
                                <label for="scopeEvents">Scope Events:</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea name="scopeEvents" cols=25, rows=25 ng-model="events"></textarea>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <label for="rootScopeEvents">Root Scope Events:</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea name="rootCcopeEvents" cols=25, rows=25 ng-model="rootEvents"></textarea>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>

JavaScript

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

app.config(['$provide', function ($provide) {
    $provide.decorator('$rootScope', ['$delegate', function ($delegate) {

        var proto = Object.getPrototypeOf(Object.getPrototypeOf($delegate));
        proto['$onRootScope'] = function (name, listener) {
            var unsubscribe = $delegate.$on(name, listener);
            this.$on('$destroy', unsubscribe);
        };
        /*
        Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
            value: function (name, listener) {
                var unsubscribe = $delegate.$on(name, listener);
                this.$on('$destroy', unsubscribe);
            },
            enumerable: false
        });
        */

        return $delegate;
    }]);
}]);

app.controller('MainCtrl', ['$scope', function ($scope) {

    $scope.name = 'Luke Skywalker';
    $scope.events = "";
    $scope.rootEvents = "";

    $scope.$onRootScope('hello', function (event, jedi) {
        $scope.rootEvents += jedi.name + "\n";
    });


    $scope.trigger = function () {
        $scope.$emit('hello', {
            name: $scope.name
        });
    };

    $scope.$on('hello', function (event, jedi) {
        $scope.events += jedi.name + "\n";
    });


}]);