AngularJS $ on, $ emit, and $ broadcast, angularjsemit

AngularJS $ on, $ emit, and $ broadcast, angularjsemit

The scope in AngularJS has a very hierarchical and nested structure. Both of them have a major $ rootScope (corresponding Angular application or ng-app), and all other scopes are inherited from this $ rootScope, or are all nested under the main scope. Many times, you will find that these scopes do not share variables or inherit anything from another prototype.

In this case, how can we communicate between scopes? One option is to create a singleton service in the application scope, and then process the communication in all subscopes through this service.

In AngularJS, another option is to process communication through events in the scope. However, this method has some limitations. For example, you cannot widely spread events to all monitoring scopes. You must select whether to communicate with the parent-level scope or sub-scope.

$ On, $ emit, and $ broadcast simplify the transfer of event and data between controllers.

1. $ Emit can only pass events and data to the parent controller
2. $ Broadcast can only pass events and data to the child controller
3. $ On is used to receive events and data.
   

Example:

Html code

<Div ng-controller = "ParentCtrl"> <! -- Parent --> <div ng-controller = "SelfCtrl"> <! -- Self --> <a ng-click = "click ()"> click me </a> <div ng-controller = "ChildCtrl"> </div> <! -- Sublevel --> </div> <div ng-controller = "BroCtrl"> </div> <! -- Level --> </div>

Js Code

App. controller ('selfctrl ', function ($ scope) {$ scope. click = function () {$ scope. $ broadcast ('to-child ', 'Child'); $ scope. $ emit ('to-parent', 'parent') ;}}); app. controller ('parentctrl ', function ($ scope) {$ scope. $ on ('to-parent', function (event, data) {console. log ('parentctrl ', data); // The value can be obtained at the parent level}); $ scope. $ on ('to-child ', function (event, data) {console. log ('parentctrl ', data); // The Sub-level cannot get the value}); app. controller ('childctrl ', function ($ scope) {$ scope. $ on ('to-child ', function (event, data) {console. log ('childctrl ', data); // The Sub-level can get the value}); $ scope. $ on ('to-parent', function (event, data) {console. log ('childctrl ', data); // The parent cannot get the value}); app. controller ('broctrl ', function ($ scope) {$ scope. $ on ('to-parent', function (event, data) {console. log ('broctrl ', data); // The value cannot be obtained at the level}); $ scope. $ on ('to-child ', function (event, data) {console. log ('broctrl ', data); // The level cannot be obtained });});

Final Result

ParentCtrl parent

ChildCtrl child

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

For the event parameter in the $ on method, the attributes and methods of the object are as follows:

 

Event attributes	Purpose
Event.tar getScope	Scope of the original event
Event. currentScope	Scope of the event currently being processed
Event. name	Event name
Event. stopPropagation ()	A function that prevents further event propagation (bubble/capture) (this is only applicable to events sent using '$ emit)
Event. preventDefault ()	This method does not actually do anything, but sets 'defaultprevented' to true. It checks the value of 'defaultprediction' until the event listener's implementer takes action.
Event. defaultPrevented	True if 'preventdefault' is called

It is much easier for services to communicate with different controllers ~~

The above are the materials for AngularJS $ on, $ emit, and $ broadcast. We will continue to add relevant materials. Thank you for your support for this site!