Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之間可以通過組合使用$broadcast,$emit,$on的事件廣播機(jī)制來進(jìn)行通信
介紹:
$broadcast的作用是將事件從父級(jí)作用域傳播至子級(jí)作用域,包括自己。格式如下:$broadcast(eventName,args)
$emit的作用是將事件從子級(jí)作用域傳播至父級(jí)作用域,包括自己,直至根作用域。格式如下:$emit(eventName,args)
$on用于在作用域中監(jiān)控從子級(jí)或父級(jí)作用域中傳播的事件以及相應(yīng)的數(shù)據(jù)。格式如下:$on(event,data)
上述說明中,eventName是需要監(jiān)控的事件的名稱,$on 方法中的參數(shù)event是事件的相關(guān)對(duì)象,data是事件傳播的數(shù)據(jù)。
在$on的方法中的event參數(shù),有如下的屬性和方法
事件屬性/方法 功能性說明
事件屬性/方法 | 功能性說明 |
---|---|
event.targetScope | 獲取傳播事件的作用域 |
event.currentScope | 獲取接收事件的作用域 |
event.name | 傳播的事件的名稱 |
event.stopPropagation() | 阻止事件進(jìn)行冒泡傳播,僅在$emit事件中有效 |
event.preventDefault() | 阻止傳播事件的發(fā)生 |
event.defaultPrevented | 如果調(diào)用了preventDefault事件則返回true |
代碼:
<!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 () { //注冊(cè)一個(gè)向上傳播的事件,eventName:'FromSelf', data:oneObject $scope.$emit("FromSelf", { divName: "Self", description: "向父?jìng)鞑?shù)據(jù)" }); }; $scope.toChild = function () { //注冊(cè)一個(gè)向下傳播的事件,eventName:'FromSelf', data:oneObject $scope.$broadcast("FromSelf", { divName: "Self", description: "向子傳播數(shù)據(jù)" }); }; $scope.name = "Self"; $scope.$on("FromChild", function (event, data) { $window.alert("當(dāng)前節(jié)點(diǎn)" + 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("當(dāng)前節(jié)點(diǎn)" + event.currentScope.name + ",截獲到了來自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description); }); $scope.$on("FromChild", function (event, data) { $window.alert("當(dāng)前節(jié)點(diǎn)" + event.currentScope.name + ",截獲到了來自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description); }); }); //控制器Child myApp.controller("Child", function ($scope, $window) { $scope.name = "Child"; //$on用于截獲來自父級(jí)作用域的事件 $scope.$on("FromSelf", function (event, data) { $window.alert("當(dāng)前節(jié)點(diǎn)" + event.currentScope.name +"截獲到了來自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description); }); //button的傳播事件 $scope.toTop = function () { //注冊(cè)一個(gè)向上傳播的事件,eventName:'FromChild', data:oneObject $scope.$emit("FromChild", { divName: "Child", description: "向上播數(shù)據(jù)" }); }; }); </script> </head> <body> <form name="test"> <div ng-controller="Parent"> 這里是父級(jí)Div <div ng-controller="Self"> 這里是子級(jí)SelfDiv <input type="button" ng-click="toParent()" value="向ParentDiv傳播事件" /> <input type="button" ng-click="toChild()" value="向ChildDiv傳播事件" /> <div ng-controller="Child"> 這里是子級(jí)ChildDiv <input type="button" ng-click="toTop()" value="向上傳播事件" /> </div> </div> <div ng-controller="Borther"> 這里是Self的兄弟BortherDiv </div> </div> </form> </body> </html>
Code
效果:

以上這篇Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS基礎(chǔ) ng-model 指令詳解及示例代碼
本文主要介紹AngularJS ng-model 指令,這里幫大家整理了ng-model的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動(dòng)態(tài)設(shè)施setter和getter不同,臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09Angular CLI發(fā)布路徑的配置項(xiàng)淺析
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項(xiàng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03詳解angularJs中自定義directive的數(shù)據(jù)交互
這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08Angular2實(shí)現(xiàn)組件交互的方法分析
這篇文章主要介紹了Angular2實(shí)現(xiàn)組件交互的方法,結(jié)合實(shí)例形式總結(jié)分析了Angular2中組件交互的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-12-12angular使用post、get向后臺(tái)傳參的問題實(shí)例
本篇文章主要介紹了angular使用post、get向后臺(tái)傳參的問題實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive,需要的朋友一起學(xué)習(xí)吧2016-04-04