AngularJS Notes--the use and distinction of $on, $emit and $broadcast

The scope in Angularjs has a very hierarchical and well-nested structure. Each of them has a major $rootScope (also say the corresponding angular application or ng-app ), and then all the other scope parts are inherited from this $rootScope , or are nested under the main scope. Many times, you will find that these scopes do not share variables or that they do not inherit anything from another prototype.

So how do you communicate between scopes in this case? One option is to create a singleton service within the application scope and then handle all child scope traffic through the 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 propagate events extensively across all monitoring scopes. You must choose whether to communicate with the parent scope or the child scope.

$on, $emit, and $broadcast make it easy to transfer event and data between controllers.

Difference 1:

• Send message: $scope. $emit (name, data) or $scope. $broadcast (name, data);
• Receive message: $scope. On (name,function (event,data) {});

Difference 2:

• $emit broadcast to the parent controller $broadcast broadcast to the child controller
• Broadcast is an event that is broadcast from the sender to his child scope.
• $emit broadcast to the parent controller, the parent controller is able to receive the message
• $on have two parameter function (EVENT,MSG) The first parameter is the event object, and the second parameter is the receipt of the message information

Examples are as follows:

HTML code

1 <DivNg-controller= "Parentctrl">                <!--Parent Level -2     <DivNg-controller= "Selfctrl">              <!--own -3         <aNg-click= "click ()">Click Me</a>4         <DivNg-controller= "Childctrl"></Div>   <!--sub-level -5     </Div>6     <DivNg-controller= "Broctrl"></Div>         <!--Lateral -7 </Div>

JS Code

1App.controller (' Selfctrl ',function($scope) {2$scope. Click =function () {3$scope. $broadcast (' to-child ', ' child ');4$scope. $emit (' to-parent ', ' parent ');5   }6 });7 8App.controller (' Parentctrl ',function($scope) {9$scope. $on (' To-parent ',function(event,data) {TenConsole.log (' Parentctrl ', data);//The parent can get the value One   }); A$scope. $on (' To-child ',function(event,data) { -Console.log (' Parentctrl ', data);//children cannot get a value -   }); the }); -  -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) { AConsole.log (' Childctrl ', data);//The parent does not get a value at   }); - }); -  -App.controller (' Broctrl ',function($scope) { -$scope. $on (' To-parent ',function(event,data) { -Console.log (' Broctrl ', data);//no value on the same lateral. in   });  -$scope. $on (' To-child ',function(event,data) { toConsole.log (' Broctrl ', data);//no value on the same lateral. +   });  -});

Final Result:

Parentctrl Child

Childctrl Parent

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

The event arguments in the $on method, the properties and methods of their objects are as follows:

Event Properties	Purpose
Event.targetscope	Emit or propagate the scope of the original event
Event.currentscope	The scope of the event 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 does not actually do anything, but will set ' defaultprevented ' to true. It does not check the value of ' defaultprevented ' until the event listener's implementation takes action.
event.defaultprevented	True if ' preventdefault ' is called

Learning: http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

AngularJS Notes--the use and distinction of $on, $emit and $broadcast