Angularjs中不同範圍之間可以通過組合使用$broadcast,$emit,$on的事件廣播機制來進行通訊
介紹：
$broadcast的作用是將事件從父級範圍傳播至子級範圍,包括自己。格式如下：$broadcast(eventName,args)
$emit的作用是將事件從子級範圍傳播至父級範圍,包括自己，直至根範圍。格式如下：$emit(eventName,args)
$on用於在範圍中監控從子級或父級範圍中傳播的事件以及相應的資料。格式如下：$on(event,data)
上述說明中，eventName是需要監控的事件的名稱，$on 方法中的參數event是事件的相關對象，data是事件傳播的資料。
在$on的方法中的event參數，有如下的屬性和方法
事件屬性/方法 功能性說明
| 事件屬性/方法 | 功能性說明 |
|---|---|
| event.targetScope | 擷取傳播事件的範圍 |
| event.currentScope | 擷取接收事件的範圍 |
| event.name | 傳播的事件的名稱 |
| event.stopPropagation() | 阻止事件進行冒泡傳播，僅在$emit事件中有效 |
| event.preventDefault() | 阻止傳播事件的發生 |
| event.defaultPrevented | 如果調用了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 () { //註冊一個向上傳播的事件，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
效果：
以上這篇Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
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
