快捷導(dǎo)航

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

更新時(shí)間：2016年05月17日 08:56:28 投稿：jingxian

下面小編就為大家?guī)?lái)一篇Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧

Angularjs中不同作用域之間可以通過(guò)組合使用$broadcast,$emit,$on的事件廣播機(jī)制來(lái)進(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)

上述說(shuō)明中，eventName是需要監(jiān)控的事件的名稱(chēng)，$on 方法中的參數(shù)event是事件的相關(guān)對(duì)象，data是事件傳播的數(shù)據(jù)。

在$on的方法中的event參數(shù)，有如下的屬性和方法

事件屬性/方法功能性說(shuō)明

事件屬性/方法	功能性說(shuō)明
event.targetScope	獲取傳播事件的作用域
event.currentScope	獲取接收事件的作用域
event.name	傳播的事件的名稱(chēng)
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 + "截獲到了來(lái)自" + 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 + ",截獲到了來(lái)自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
      }); 
      $scope.$on("FromChild", function (event, data) {
        $window.alert("當(dāng)前節(jié)點(diǎn)" + event.currentScope.name + ",截獲到了來(lái)自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
      });

    });
    //控制器Child
    myApp.controller("Child", function ($scope, $window) {
      $scope.name = "Child";
      //$on用于截獲來(lái)自父級(jí)作用域的事件
      $scope.$on("FromSelf", function (event, data) {
        $window.alert("當(dāng)前節(jié)點(diǎn)" + event.currentScope.name +"截獲到了來(lái)自" + 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

　效果：