JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="directiveA.html">
        <div>
            <h1>Directive A</h1>
            {{test}}<br/>
            {{test2}}
            <!-- something here -->
            <div ng-transclude></div>
        </div>
    </script>
    <script type="text/ng-template" id="directiveB.html">
        <div>
        <h1>Directive B</h1>
        <div>{{test}}</div>
            <div>{{test2}}</div>
        </div>
    </script>
    <directive-a>
        <directive-b></directive-b>
    </directive-a>
</div>

CSS

directive-b div{
    background-color: green !important;
}

directive-a>div{
    background-color: lightgray;
    border: 2px solid red;
}

JavaScript

angular.module('demoApp', [])
	.controller('mainController', function($scope) {

})
	.service('interDirCom', function() {
    // observer pattern
    		var self = this;
    
			angular.extend(this, {
                subscribers: [],
                subscriberCount: 0,
            newSubscriber: function(callback) {
                return {
                    id: self.subscriberCount++,
                    notify: callback
                };
            },
            subscribe: function(callback) {
                //add listener
                var subscriber = self.newSubscriber(callback);
                self.subscribers.push(subscriber);
            },
            notify: function(message){
                console.log('notify', this, self, self.subscribers);
                angular.forEach(self.subscribers, function(subscriber) {
                    console.log(subscriber, message);
                    subscriber.notify(message);
                });
            }
        });
    	//return service;
	})
    .directive('directiveA', directiveA)
    .directive('directiveB', directiveB);

function directiveA() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'directiveA.html',
        controller: function ($scope, $rootScope, interDirCom) {
            
            interDirCom.subscribe(function(message) {
                //console.log('callback of subscriber called');
            	$scope.test2 = message;
            });
            
            $scope.test = "test data";
            this.test = 'hello from controller A in dir. B';
            
            $rootScope.$on('dirB:test', function(evt, data) {
                console.log('received event', data);
            	$scope.test = data.message;
            });
            
            this.callback = function(message) {
                $scope.test2 = message;
            };
        }
    };
}

function directiveB(interDirCom) {
    return {
       ...