Using $rootScope with $broadcast/$emit in AngularJS 1.6

In this example below you will see how to do a Using $rootScope with $broadcast/$emit in AngularJS 1.6 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by seniorkae, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seniorkae ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Using $rootScope with $broadcast/$emit in AngularJS 1.6</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="app">
  <div ng-controller="ctrl1" class='ctrl-boundary'>
    <h3>Ctrl1</h3>
    value: {{value}}<br>
    <input type="text" ng-model="value" ng-change="onInput()"/>
  </div>
  
  <div ng-controller="ctrl2" class='ctrl-boundary'>
    <h3>Ctrl2</h3>
    value: {{value}} <br> 
    broadcasted value: {{broadcastedValue}} <br>
    emitted value: {{emittedValue}}
    
    <div ng-controller="ctrl3"class='ctrl-boundary'>
      <h3>Ctrl3</h3>
      {{value}}<br>
      broadcasted value: {{broadcastedValue}}
    </div>
  </div>
</div>

<p>
  <h4>Notes:</h4>
  $rooScope.$broadcast allows to comunicate something between non nested controllers and from parent to children<br><br>
  $rootScope.$emit allows to comunicate something between nested controllers specifically from children to parent.
</p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/seniorkae/using-dollarrootscope-with-dollarbroadcastdollaremit-in-angularjs-16-EWYqgJ */
.ctrl-boundary{
  border: 1px solid black;
  padding: 15px;
  margin: 10px;
}

h3{
  margin-top:0;
}

/*Downloaded from https://www.codeseek.co/seniorkae/using-dollarrootscope-with-dollarbroadcastdollaremit-in-angularjs-16-EWYqgJ */
var app = angular.module('app', ['controllers']);
var controllers = angular.module('controllers', []);

controllers.controller('ctrl1', ['$scope', '$rootScope', '$timeout', 
function($scope, $rootScope, $timeout){
  $scope.value = '';
  
  $scope.onInput = function(){
    $rootScope.$broadcast('ctrl1:value', $scope.value);
  };
  
  var loadValue = function(){
    $timeout(function(){
      $scope.value = 'Controller 11 value';
      $rootScope.$broadcast('ctrl1:value', $scope.value);
    }, 3000);
  };
  
  var init = function(){
    loadValue();
  };
  
  init();
}]);

controllers.controller('ctrl2', ['$scope', '$rootScope', '$timeout',
function($scope, $rootScope, $timeout){
  $scope.value = '';
  $scope.broadcastedValue = '';
  $scope.emittedValue = '';
  
  var loadValue = function(){
    $timeout(function(){
      $scope.value = 'Controller 2 value';
      $rootScope.$broadcast('ctrl2:value', $scope.value);
    }, 5000);
  }
  
  var loadValues = function(){    
    $scope.$on('ctrl1:value', function(event, data){
      $scope.broadcastedValue = data;
    });
    
    $scope.$on('ctrl3:value', function(event, data){
      $scope.emittedValue = data;
    });
  };
  
  var init = function(){
    loadValue();
    loadValues();
  };
  
  init();
}]);

controllers.controller('ctrl3', ['$scope', '$timeout', '$rootScope',
function($scope, $timeout, $rootScope){
  $scope.value = '';
  $scope.broadcastedValue = '';
  
  var loadValue = function(){
    $timeout(function(){
      $scope.value = 'Controller 3';
      $scope.$emit('ctrl3:value', $scope.value);
    }, 4000);
  };
  
  var loadValues = function(){
    $scope.$on('ctrl2:value', function(event, data){
      $scope.broadcastedValue = data;
    });
  };
  
  var init = function(){
    loadValue();
    loadValues();
  };
  
  init();
}]);

Comments