What is an event
• Angular applications can respond to angular events as browsers respond to browser-level events, such as mouse clicks and focus.
The angular event system is not connected to the browser's event system, and we can only listen to angular events on the scope instead of DOM events
Event propagation
Because scopes are layered, we can pass events over the scope chain:
• Using the $emit bubbling event, the event bubbles from the current child scope to the assignment scope, and all scopes on the scope that generated the event receive notification of this event
The $emit () method has two parameters:
Name of the event to be emitted by name
Args A collection of parameters that is passed to the event listener as an object
• Passing events with $broadcast, each of the child scopes that registered the listener receives this information
The $broadcast () method has two parameters:
Name of the event to be broadcast by name
Args A collection of parameters that is passed to the event listener as an object
• Use $on to monitor events
The $on () method has two parameters:
Event Events Object
Param a collection of parameters, $broadcast (), $emit () An example of a collection of parameters passed over:
demo.html <!doctype html>
App.js/* Declares module*/var module = angular.module (' Freefedapp ', []); /* Declaration Controller/Module.controller (' Freefedctrl ', [' $scope ', function ($scope) {//Monitor Directiveclick event $scope. $on (' Directiv Eclick ', function (Event,param) {console.log (param);
Print Results {title: ' I am from the instruction child scope '}};
$scope. Change = function (title) {var = ' Note receive parent broadcast ';
Broadcasts the Parentbroadcast event $scope to the child scope. $broadcast (' Parentbroadcast ', {msg:result});
};
}]);
/* Declaration instruction/module.directive (' eventdirective ', function () {return {scope: {change: ' & '}, Replace:true, Template: ' <a> dot I bubble up event </a> ', Link:function (scope,el,attr) {El . On (' click ', function () {///up-bubble Directiveclick event to notify parent scope scope. $emit (' Directiveclick ', {title: ' I'm from the command.
Level scope '});
}); Monitor Parentbroadcast event broadcast scope. $on (' Parentbroadcast ', function (event,msg) {console.log (msg); Print result {mSG: Please be aware of receiving parent broadcast}});
}
}; });
Event Object Properties
The event events object properties in the $on are as follows:
Targetscope (Scope object)
Scope for sending or broadcasting events
CurrentScope (Scope object)
Scope of the current processing event
Name (String)
The name of the event being processed
stoppropagation (function)
Stoppropagation () function cancels further propagation of events triggered by $emit
The preventdefault (function) preventdefault () sets the defaultprevented flag to true, although the event propagation cannot be stopped. However, a child scope can know through the defaultprevented flag that this event does not need to be handled
defaultprevented (boolean value)
The defaultprevented attribute can be judged to determine whether the event that is propagated by the parent can be ignored
This article on the Angularjs in the event is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
