JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<div ng-app='demo'>
	<div ng-controller='loadData'>
	  <button ng-click='uploadData($event)' >upload</button><indicator-tag></indicator-tag>
    <div>{{dataUploaded}}</div>
	</div>
	</div>

JavaScript

var demo = angular.module('demo', []);
demo.controller('loadData', function($scope,$rootScope,$http){
  var buses=[
  {
  	"name":"aaa",
    "status":"A/C"
  },
  {
  	"name":"bbb",
    "status":"Non A/C"
  },
  {
  	"name":"ccc",
    "status":"A/C"
  },
  {
  	"name":"ddd",
    "status":"Non A/C"
  }
  ];
   $scope.uploadData = function() {
   var initial="Loading...";
   var afterLoading="uploaded";
   $rootScope.$broadcast('changeIndicator',initial);
   $http.get("/echo/json/", buses).success(function(data, status, headers, config) {
   $scope.dataUploaded=buses;
      $rootScope.$broadcast('changeIndicator',afterLoading);
    });
   };
});
demo.directive('indicatorTag', function() {
	  return {
    restrict: 'E',
    replace: true,
    transclude: false,
    template: '<span>{{text}}</span>',
    link: function(scope, element, attrs){
       scope.changeText = function(data){
         scope.text = data;
       };
         scope.$on('changeIndicator',function(event, data){
             scope.changeText(data)
         });
     }
  };
});