欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年05月17日 08:56:28   投稿:jingxian  
下面小編就為大家?guī)硪黄狝ngularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧

Angularjs中不同作用域之間可以通過組合使用$broadcast,$emit,$on的事件廣播機制來進行通信

介紹:

$broadcast的作用是將事件從父級作用域傳播至子級作用域,包括自己。格式如下:$broadcast(eventName,args)

$emit的作用是將事件從子級作用域傳播至父級作用域,包括自己,直至根作用域。格式如下:$emit(eventName,args)

$on用于在作用域中監(jiān)控從子級或父級作用域中傳播的事件以及相應的數(shù)據(jù)。格式如下:$on(event,data)

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

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

事件屬性/方法 功能性說明

事件屬性/方法 功能性說明
event.targetScope 獲取傳播事件的作用域
event.currentScope 獲取接收事件的作用域
event.name 傳播的事件的名稱
event.stopPropagation() 阻止事件進行冒泡傳播,僅在$emit事件中有效
event.preventDefault() 阻止傳播事件的發(fā)生
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: "向父傳播數(shù)據(jù)" });
      };
      $scope.toChild = function () {
        //注冊一個向下傳播的事件,eventName:'FromSelf', data:oneObject
        $scope.$broadcast("FromSelf", { divName: "Self", description: "向子傳播數(shù)據(jù)" });
      };
      $scope.name = "Self";
      $scope.$on("FromChild", function (event, data) {
        
        $window.alert("當前節(jié)點" + 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("當前節(jié)點" + event.currentScope.name + ",截獲到了來自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description);
      }); 
      $scope.$on("FromChild", function (event, data) {
        $window.alert("當前節(jié)點" + 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("當前節(jié)點" + event.currentScope.name +"截獲到了來自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description);
      });
      
      //button的傳播事件
      $scope.toTop = function () {
        //注冊一個向上傳播的事件,eventName:'FromChild', data:oneObject
        $scope.$emit("FromChild", { divName: "Child", description: "向上播數(shù)據(jù)" });
      };

    });
  </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就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • AngularJS Module方法詳解

    AngularJS Module方法詳解

    AngularJS中的Module類負責定義應用如何啟動,它還可以通過聲明的方式定義應用中的各個片段。我們來看看它是如何實現(xiàn)這些功能的
    2015-12-12
  • AngularJS基礎 ng-model 指令詳解及示例代碼

    AngularJS基礎 ng-model 指令詳解及示例代碼

    本文主要介紹AngularJS ng-model 指令,這里幫大家整理了ng-model的基本資料,并附有示例代碼,有需要的小伙伴可以參考下
    2016-08-08
  • angularjs學習筆記之雙向數(shù)據(jù)綁定

    angularjs學習筆記之雙向數(shù)據(jù)綁定

    AngularJS在$scope變量中使用臟值檢查來實現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設施setter和getter不同,臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。
    2015-09-09
  • Angular CLI發(fā)布路徑的配置項淺析

    Angular CLI發(fā)布路徑的配置項淺析

    這篇文章主要給大家介紹了關于Angular CLI發(fā)布路徑的配置項的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • 詳解angularJs中自定義directive的數(shù)據(jù)交互

    詳解angularJs中自定義directive的數(shù)據(jù)交互

    這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)示例

    Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)示例

    本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Angular2實現(xiàn)組件交互的方法分析

    Angular2實現(xiàn)組件交互的方法分析

    這篇文章主要介紹了Angular2實現(xiàn)組件交互的方法,結合實例形式總結分析了Angular2中組件交互的相關操作技巧與注意事項,需要的朋友可以參考下
    2017-12-12
  • angular使用post、get向后臺傳參的問題實例

    angular使用post、get向后臺傳參的問題實例

    本篇文章主要介紹了angular使用post、get向后臺傳參的問題實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • Angular 根據(jù) service 的狀態(tài)更新 directive

    Angular 根據(jù) service 的狀態(tài)更新 directive

    Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive,需要的朋友一起學習吧
    2016-04-04
  • ng-zorro-antd 入門初體驗

    ng-zorro-antd 入門初體驗

    這篇文章主要介紹了ng-zorro-antd 入門初體驗,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12

最新評論