JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<body ng-app="myapp">
<div ng-controller="MyController1">
    <button ng-click="OnClick($event)">Broadcast Down</button>
    <h4>{{Message}}</h4>

    <div ng-controller="MyController2">
        <h4>{{Message}}</h4>

        <div ng-controller="MyController3">
            <h4>{{Message}}</h4>
            <button ng-click="OnClick($event)">Emit Up</button>
        </div>
    </div>
</div>
</body>

JavaScript

angular.module('myapp', [])
            .controller("MyController1", function ($scope) {

                //broadcast the event down
                $scope.OnClick = function (evt) {
                    $scope.$broadcast("SendDown", "some data");
                };

                //handle SendDown event
                $scope.$on("SendDown", function (evt, data) {
                    $scope.Message = "Inside SendDown handler of MyController1 : " + data;
                });

                //handle SendUp event
                $scope.$on("SendUp", function (evt, data) {
                    $scope.Message = "Inside SendUp handler of MyController1 : " + data;
                });
            })
            .controller("MyController2", function ($scope) {

                //handle SendDown event
                $scope.$on("SendDown", function (evt, data) {
                    $scope.Message = "Inside SendDown handler of MyController2 : " + data;
                });

                //handle SendUp event
                $scope.$on("SendUp", function (evt, data) {
                    $scope.Message = "Inside SendUp handler of MyController2 : " + data;
                });
            })
            .controller("MyController3", function ($scope) {

                //handle SendDown event
                $scope.$on("SendDown", function (evt, data) {
                    $scope.Message = "Inside SendDown handler of MyController3 : " + data;
                });

                //emit SendUp event up
                $scope.OnClick = function (evt) {
                    $scope.$emit("SendUp", "some data");
                };

                //handle SendUp event
                $scope.$on("SendUp", function (evt, data) {
                    $scope.Message = "Inside SendUp handler of MyController3 : " + data;
                });
            });