JSFiddle - React, Tailwind, and code Playground

by goodwill

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="PublishController">
        <button ng-click="broadcast()">Broadcast</button>
        {{broadcastCount}}
        {{myMessage}}
    </div>
    <div ng-controller="SubscribeController">
        <ul>
            <li ng-repeat="message in messages" ng-fade-in>{{message}}</li>
        </ul>
    
    </div>
</div>

JavaScript

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


  myApp.directive('ngFadeIn', function() {
    return function(scope, element, attr) {
      if (element.is('tr, tbody')) {
        element.find('td').effect("highlight", {}, 500);
      } else {
        element.effect("highlight", {}, 500);
      }
      return scope.destroy = function(complete) {
        return element.fadeOut(500, function() {
          if (complete) {
            return complete.apply(scope);
          }
        });
      };
    };
  });
function PublishController($scope, $rootScope) {
    $scope.broadcastCount=0;
    $scope.myMessage="hello world";
    $scope.broadcast=function() {
        $scope.broadcastCount+=1;
        $rootScope.$broadcast("message", "message " + $scope.broadcastCount);
    };
    $scope.$on('message', function(scope, msg) { $scope.myMessage= msg })
};

function SubscribeController($scope) {
    $scope.messages = ["message1","message2"]
    $scope.$on('message', 
              function(scope, args) {
                  $scope.messages.push(args)
              });
    
}