Event propagation $emit in Angularjs, $broadcast, $on

The technical points written here are part of the reference Angularjs authoritative tutorial part of the reference to other bloggers ' knowledge points

Events: Angular applications can respond to angular events as browsers respond to events in the browser layer, such as mouse clicks and page scrolling.
This allows us to communicate between components nested within our application, even if they are not considered for other components when they are created. We can think of events as fragments of event information that are propagated in the app, usually containing information about the events that occur in the app

Note: The Anjularjs event System does not communicate with the event system in the browser, which means that we can only listen to the angular event on the scope rather than the DOM event

1. In a call $emit event function, the event bubbles from the child scope to the parent scope

The $emit () function can accept two parameters

• Name (the name of the event that the string is to occur)
• Args (sets a collection of parameters that are passed as objects to the event listener.) )
• The tangent exceptions emitted from the listener are passed to the $exceptionhandler service

2. $broadcast event in a function call is passed down the event whose arguments are the same as $emit

3. Monitoring on parameters for $on events

• The name of the event being monitored
• The function (event, data) data is the information that is passed in the event is the event object

4. Properties of Event objects () These can be manipulated by the function event object

• Targetscope (Scope object) This property is the scope of the Send or broadcast event.
• CurrentScope (Scope object) This object contains the scope of the current processing event.
• Name (string) This string is triggered after we are processing the event names.
• The stoppropagation (function) stoppropagation () function cancels further propagation of events triggered by $emit.
• Preventdefault (function) Preventdefault sets the defaultprevented flag to true. Although it is not possible to stop the propagation of events, we can tell the child scopes not to handle the event (that is, they can be safely ignored).
• The defaultprevented (Boolean) call to Preventdefault () sets the defaultprevented to true.

5. $emitted Events for Core systems

• $includeContentLoaded $includeContentLoaded event is triggered from the nginclude instruction when the contents of the Nginclude are reloaded.
• $includeContentRequested $includeContentRequested event is sent from the scope of the call to Nginclude. Each time the content of the nginclude is requested, it will be sent.
• $viewContentLoaded $viewContentLoaded event is sent from the current Ngview scope whenever the Ngview content is reloaded.

6. $broadcast Events for Core systems

• $locationChangeStart when angular updates the address of the browser from the $location service (through $location.path (), $location. Search (), and so on), it triggers the $ Locationchangestart event.
• $locationChangeSuccess if and only if the address of the browser is successfully changed, and the $locationchangestart event is not blocked, $locationChangeSuccess event will be broadcast from $rootscope.
• $routeChangeStart $routeChangeStart event is sent from $rootscope before the routing change occurs. That is, when the routing service begins to parse all the dependencies required for routing changes.
• $routeChangeSuccess $routeChangeSuccess is broadcast from $rootscope after all routing dependencies have been parsed following $routechangestart. The Ngview directive uses the $routechangesuccess event to learn when to instantiate a controller and render a view.
• $routeChangeError if any of the resolve properties on the routing object are rejected, the $routeChangeError will be triggered (for example, they fail). The event was broadcast from the $rootscope.
• $routeUpdate if the Reloadonsearch property on $routeprovider is set to false and the same instance of the controller is used, $routeUpdate event is broadcast from $rootscope.
• $destroy The $destroy event is broadcast on the scope before the scope is destroyed. This order gives the child scope an opportunity to clean itself before the parent scope is really removed.

About testing the code

<! DOCTYPE html><!--Here is an application that initializes anglularjs-->div{border:1px solid #ff7300;p Adding:20px;margin:10px;border-radius:5px}</style>own child Scopes</div> </div> <div ng-controller= "Siblingscontroller" >own lateral Scopes</div> </div> <script type= "Text/javascript" >varApp=angular.module ("App",[]); App.controller (' Oneselfcontroller ',function($scope) {$scope. Clickeme=function() {alert (Hello); //propagating data to a sub-scope$scope. $broadcast (' Sendchild ', ' passing data to the child controller '); //propagating data to the parent scope (bubbling)$scope. $emit (' sendparent ', ' bubbling to the parent element ')          };      }); App.controller (' Parentcontroller ',function($scope) {//Monitor the $emit () event$scope. $on (' Sendparent ',function(event,data) {Console.log (' The data passed over by Oneselfcontroller ', data,event.name,event);          }); $scope. PARENTCL=function(){              //passing data to all child scopesAlert (' Hello '); $scope. $broadcast (' Sendallchild ', ' let Siblingscontroller receive ')          };      }); App.controller (' Childcontroller ',function($scope) {//Monitor$scope. $on (' Sendchild ',function(event,data) {Console.log (' Childctrl ', data,event.name,event);                }); }) App.controller (' Siblingscontroller ',function($scope) {$scope. $on (' Sendallchild ',function(event,data) {Console.log (' It's worth it. ', data);          }); //transmission does not spread to the lateral$scope. $on (' Sendparent ',function(event,data) {alert (' Who are you? '); Console.log (' No value on the same lateral ', data);                      }); $scope. $on (' Sendchild ',function(event,data) {Console.log (' No value on the same lateral ', data);      }); });</script></body>


Event propagation $emit in Angularjs, $broadcast, $on