Event broadcast in Angularjs-full parse $broadcast, $emit, $on

Last Update:2017-04-27 Source: Internet

Author: User

Tags emit

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Angularjs can be used to communicate between different scopes in a $broadcast, $emit, $on event broadcast mechanism.

Introduced:

$broadcast's role is to propagate events from the parent scope to the child scope, including itself. The format is as follows: $broadcast (Eventname,args)

$emit's role is to propagate events from the child scope to the parent scope, including itself, up to the root scope. The format is as follows: $emit (Eventname,args)

$on is used to monitor events that propagate from a child or parent scope and the corresponding data in the scope. The format is as follows: $on (Event,data)

In the above description, EventName is the name of the event that needs to be monitored, and the parameter event in the $on method is the object of the event, and data is the event's propagation.

The event parameters in the $on method, such as the following properties and methods

Event Properties/Methods Functional Description

Event Properties/Methods	Description of functionality
Event.targetscope	Get the scope of the propagation event
Event.currentscope	Get the scope of the Receive event
Event.name	The name of the propagated event
Event.stoppropagation ()	Block events from bubbling propagation, valid only in $emit events
Event.preventdefault ()	Prevent propagation events from occurring
event.defaultprevented	Returns true if the Preventdefault event is called

Code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778 <!DOCTYPE html><html ng-app="myApp"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="ajjs/angularjs.js"></script> <script> var myApp = angular.module("myApp", []); //控制器Self myApp.controller("Self", function ($scope,$window) { //button的传播事件 $scope.toParent = function () { //注册一个向上传播的事件，eventName:‘FromSelf‘, data:oneObject $scope.$emit("FromSelf", { divName: "Self", description: "向父传播数据" }); }; $scope.toChild = function () { //注册一个向下传播的事件，eventName:‘FromSelf‘, data:oneObject $scope.$broadcast("FromSelf", { divName: "Self", description: "向子传播数据" }); }; $scope.name = "Self"; $scope.$on("FromChild", function (event, data) { $window.alert("当前节点" + event.currentScope.name + "截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description); }); }); //控制器Parent myApp.controller("Parent", function ($scope, $window) { $scope.name = "Parent"; //$on用于事件 $scope.$on("FromSelf", function (event, data) { $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description); }); $scope.$on("FromChild", function (event, data) { $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description); }); }); //控制器Child myApp.controller("Child", function ($scope, $window) { $scope.name = "Child"; //$on用于截获来自父级作用域的事件 $scope.$on("FromSelf", function (event, data) { $window.alert("当前节点" + event.currentScope.name +"截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description); }); //button的传播事件 $scope.toTop = function () { //注册一个向上传播的事件，eventName:‘FromChild‘, data:oneObject $scope.$emit("FromChild", { divName: "Child", description: "向上播数据" }); }; }); </script></head><body> <form name="test"> <div ng-controller="Parent"> 这里是父级Div <div ng-controller="Self"> 这里是子级SelfDiv <input type="button" ng-click="toParent()" value="向ParentDiv传播事件" /> <input type="button" ng-click="toChild()" value="向ChildDiv传播事件" /> <div ng-controller="Child"> 这里是子级ChildDiv <input type="button" ng-click="toTop()" value="向上传播事件" /> </div> </div> <div ng-controller="Borther"> 这里是Self的兄弟BortherDiv </div> </div> </form></body> </html>

Code

Effect:

Other properties:

Above this ANGULARJS event broadcast-comprehensive analysis $broadcast, $emit, $on is the small part to share all the content of everyone, hope to give you a reference, but also hope that we support the script home.

Event broadcast in Angularjs-full parse $broadcast, $emit, $on

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More