JSFiddle - React, Tailwind, and code Playground

by Stepan Kasyanenko

HTML

<div id="app" ng-app="app">
  <div ng-controller="ExampleController">
    <button onclick="_ajaxCUSTOMER1('5')">
      Click Here to send 5
    </button>
    <bill>
    </bill>
  </div>
</div>

JavaScript

var app = angular.module('app', [])
  .controller('ExampleController', function($scope, broadcastService) {
    $scope._ajaxCUSTOMER = function(val) {
      broadcastService.sendAjaxResut('b1', val);
    }
  });
app.factory('broadcastService', ['$rootScope',
  function($rootScope) {
    var factory = {};
    factory.sendAjaxResut = function(name, obj) {
      console.log(' -- $broadcast ');
      $rootScope.$broadcast(name, obj);
    }
    return factory;
  }
]);

app.directive("bill", [directive]);

function directive() {
  return {
    restrict: "E",
    link: function($scope) {
      $scope.$on("b1", function(e, a) {
        console.log('-- directive')
      });
    }
  }
}
function _ajaxCUSTOMER1(e) {
  angular
    .injector(['ng' ,'app']) 
    .get("broadcastService")
    .sendAjaxResut("b1", e);
}