Angularjs中的事件廣播 ―全面解析$broadcast,$emit,$on

2019-11-20 10:02:00

字體：大中小

來源：轉載

供稿：網友

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

　效果：