What is an event
•Just just like a browser responds to events in the browser layer, such as mouse clicks and gaining focus, an angular application can also respond to angular events.
•The angular event system is not connected to the browser's event system. We can only listen to angular events instead of DOM events in scope.
Event spread
Because scopes are hierarchical, we can pass events on the scope chain:
•Use $emit bubble event, the event bubbles from the current subscope to the assignment scope, and all scopes above the scope that generated the event will be notified of this event.
The $emit() method takes two parameters:
name The name of the event to be emitted
args A set of parameters that are passed as objects to the event listener
•Use $broadcast to pass events down, and each subscope that registers the listener will receive this message
The $broadcast() method takes two parameters:
name The name of the event to be broadcast
args A set of parameters that are passed as objects to the event listener
• Use $on to listen for events
The $on() method takes two parameters:
event event object
Param parameter set, example parameter set passed by $broadcast() and $emit():
demo.html <!doctype html> <html ng-app="freefedApp"> <head> <title>angular application demo</title> <script src="angular.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="freefedCtrl"> <div event-directive change="change(title)"></div> </div> </body> </html>
app.js /*Declare module*/ var module = angular.module('freefedApp',[]); /*Declare controller*/ module.controller('freefedCtrl',['$scope',function($scope){ //Speak directiveClick events$scope.$on('directiveClick',function(event,param){ console.log(param); //Print result {title : 'I'm from the instruction child scope'} }); $scope.change = function(title){ var result = 'Please pay attention to receiving parent broadcast'; //Broadcast parentBroadcast event $scope.$broadcast('parentBroadcast',{msg : result}); }; }]); /*Declare directive*/ module.directive('eventDirective',function(){ return { scope : { change : '&' }, replace : true, template : '<a>Click me upward bubbling event</a>', link : function( scope,el,attr ){ el.on('click',function(){ //Bubble upward directiveClick event to notify the parent scope scope.$emit('directiveClick',{title: 'I'm from the instruction child scope'}); }); // Listen to parentBroadcast event broadcast scope.$on('parentBroadcast',function(event,msg){ console.log(msg); //Print the result { msg: Please pay attention to receiving parent broadcast} }); } }; });Event object properties
The event event object properties in $on are as follows:
•targetScope(scope object)
Scope of sending or broadcasting events
•currentScope(scope object)
The scope of the current processing event
•name(string)
The name of the event being processed
•stopPropagation(function)
StopPropagation() function cancels further propagation of the event triggered by $emit
• preventDefault(function) preventDefault() sets the defaultprevented flag to true. Although the event propagation cannot be stopped, the subscope can know that this event is not required through the defaultprevented flag.
•defaultPrevented(boolean value)
You can judge whether the events propagated by the parent can be ignored by judging the defaultPrevented property.
The above brief discussion of the events in angularJS is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.