Use of Angularjs $on, $emit and $broadcast _angularjs

The scope of the ANGULARJS has a very hierarchical and nested structure. They all have a major $rootscope (also say the corresponding angular application or ng-app), and all other scopes are inherited from this $rootscope, or nested under the main scope. Most of the time, you'll find that these scopes don't share variables or that they don't inherit anything from another prototype.

So in this case, how do you communicate between scopes? One option is to create a single instance service within the scope of an application and then handle traffic for all child scopes through this service.

There is another option in Angularjs: Handling traffic through events in the scope. But there are some limitations to this approach; For example, you can't spread events across all monitored scopes. You must choose whether to communicate with the parent scope or child scope.

$on, $emit and $broadcast make it easier to transfer event and data between controller.

1. $emit can only pass event and data to parent controller
2. $broadcast can only pass event and data to child controller
3. $on used to receive event and data
   

Examples are as follows

HTML code

<div ng-controller= "Parentctrl" >        <!--parent--> <div ng-controller= "
  Selfctrl" >       <!-- Own-->
    <a ng-click= "click ()" >click me</a> <div ng-controller=
    "Childctrl" ></div>  <!--child-->
  </div>
  <div ng-controller= "Broctrl" ></div>     <!--level-->
</div>

JS Code

 App.controller (' Selfctrl ', function ($scope) {$scope. click = function () {$scope. $b
    Roadcast (' to-child ', ' child ');
  $scope. $emit (' to-parent ', ' parent ');

}
}); App.controller (' Parentctrl ', function ($scope) {$scope. $on (' To-parent ', function (event,data) {console.log (' PARENTCT    RL ', data);
  The parent can get the value});    $scope. $on (' To-child ', function (event,data) {console.log (' Parentctrl ', data);
Child cannot get value});

}); App.controller (' Childctrl ', function ($scope) {$scope. $on (' To-child ', function (event,data) {console.log (' Childctrl ')     , data);
  The child can get the value});     $scope. $on (' To-parent ', function (event,data) {console.log (' Childctrl ', data);
Parent does not have a value});

}); App.controller (' Broctrl ', function ($scope) {$scope. $on (' To-parent ', function (event,data) {console.log (' Broctrl '),     data); 
  No value at peer});     $scope. $on (' To-child ', function (event,data) {console.log (' Broctrl ', data); 
No value at peer});

}); 

Final results

Parentctrl Parent

Childctrl Child

$emit and $broadcast can pass multiple parameters, $on can also receive multiple parameters.

In the $on method, the event events argument whose object's properties and methods are as follows

Event Properties	Purpose
Event.targetscope	Emit or propagate the scope of the original event
Event.currentscope	Scope of the event that is currently being processed
Event.name	Event name
Event.stoppropagation ()	A function to prevent further propagation (bubbling/trapping) of events (this applies only to events emitted using ' $emit ')
Event.preventdefault ()	This method will not actually do anything, but will set ' defaultprevented ' to true. It does not check the value of ' defaultprevented ' until the person implementing the event listener takes action.
event.defaultprevented	True if ' preventdefault ' is invoked

It is more convenient to communicate in different controller than service ~ ~

The above is the Angularjs $on, $emit and $broadcast data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!