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

淺談angularJS中的事件

 更新時間:2016年07月12日 09:04:14   投稿:jingxian  
下面小編就為大家?guī)硪黄獪\談angularJS中的事件。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

什么是事件

•如同瀏覽器響應瀏覽器層的事件,比如鼠標點擊、獲得焦點,angular應用也可以響應angular事件

•angular事件系統(tǒng)并不與瀏覽器的事件系統(tǒng)相通,我們只能在作用域上監(jiān)聽angular事件而不是DOM事件

事件傳播

因為作用域是有層次的,所以我們可以在作用域鏈上傳遞事件:

•使用$emit冒泡事件,事件從當前子作用域冒泡到賦作用域,在產(chǎn)生事件的作用域之上的所有作用域都會收到這個事件的通知

$emit()方法帶有兩個參數(shù):

name  要發(fā)出的事件的名稱

args   一個參數(shù)集合,作為對象傳遞到事件監(jiān)聽器上

•使用$broadcast向下傳遞事件,每個注冊了監(jiān)聽器的子作用域都會收到這個信息

$broadcast()方法帶有兩個參數(shù):

name  要廣播的事件的名稱

args   一個參數(shù)集合,作為對象傳遞到事件監(jiān)聽器上

•使用$on監(jiān)聽事件

$on()方法帶有兩個參數(shù):

event  事件對象

param  參數(shù)集合,$broadcast()、$emit()傳遞過來的參數(shù)集合  示例:

demo.html

 <!doctype html>
 <html ng-app="freefedApp">
   <head>
     <title>angular應用demo</title>
     <script src="angular.js"></script>
     <script src="app.js"></script>
  </head>
  <body>
  <div ng-controller="freefedCtrl">
     <div event-directive change="change(title)"></div>
   </div>
  </body>
 </html>
app.js

 /*聲明module*/
 var module = angular.module('freefedApp',[]);

 /*聲明控制器*/
 module.controller('freefedCtrl',['$scope',function($scope){
     //監(jiān)聽directiveClick事件
     $scope.$on('directiveClick',function(event,param){
        console.log( param );  // 打印結果 {title : '我是來自指令子級作用域'}
     });

     $scope.change = function(title){
       var result = '請注意接收父級廣播';
       //向子級作用域廣播parentBroadcast事件
       $scope.$broadcast('parentBroadcast',{msg : result});
     };
 }]);

 /*聲明指令*/
 module.directive('eventDirective',function(){
    return {
       scope : {
         change : '&'
       },
      replace : true,
      template : '<a>點我向上冒泡事件</a>',
       link : function( scope,el,attr ){
         el.on('click',function(){
          //向上冒泡directiveClick事件,通知父級作用域
           scope.$emit('directiveClick',{title : '我是來自指令子級作用域'});
         });

        //監(jiān)聽parentBroadcast事件廣播
        scope.$on('parentBroadcast',function(event,msg){
           console.log( msg );  //打印結果 { msg : 請注意接收父級廣播 }
        });
       }
    };
 });

事件對象屬性

$on中的event事件對象屬性如下:

•targetScope(作用域對象)

發(fā)送或者廣播事件的作用域

•currentScope(作用域對象)

當前處理事件的作用域

•name(字符串)

正在處理事件的名稱

•stopPropagation(函數(shù))

stopPropagation()函數(shù)取消通過$emit觸發(fā)事件的進一步傳播

•preventDefault(函數(shù)) preventDefault()把defaultprevented標志設置為true,盡管不能停止事件傳播,但是子作用域可以通過defaultprevented標志知道無需處理這個事件

•defaultPrevented(布爾值)

可以通過判斷defaultPrevented屬性來判斷父級傳播的事件是否可以去忽略

以上這篇淺談angularJS中的事件就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 詳解angularjs 學習之 scope作用域

    詳解angularjs 學習之 scope作用域

    本篇文章主要介紹了詳解angularjs 學習之 scope作用域,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • NodeJs——入門必看攻略

    NodeJs——入門必看攻略

    下面小編就為大家?guī)硪黄狽odeJs——入門必看攻略。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • AngularJS 整理一些優(yōu)化的小技巧

    AngularJS 整理一些優(yōu)化的小技巧

    本文主要介紹AngularJS 一些優(yōu)化上的小技巧,這里整理了幾種方法供大家參考,有興趣的小伙伴可以參考下
    2016-08-08
  • 基于Angularjs-router動態(tài)改變Title值的問題

    基于Angularjs-router動態(tài)改變Title值的問題

    今天小編就為大家分享一篇基于Angularjs-router動態(tài)改變Title值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • angular2模塊和共享模塊詳解

    angular2模塊和共享模塊詳解

    這篇文章主要介紹了angular2模塊和共享模塊詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Angularjs實現(xiàn)下拉框聯(lián)動的示例代碼

    Angularjs實現(xiàn)下拉框聯(lián)動的示例代碼

    本篇文章主要介紹了Angularjs下拉框聯(lián)動的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Angular工具方法學習

    Angular工具方法學習

    這篇文章主要為大家詳細介紹了Angular工具方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Angular應用的多語言設置問題解決示例

    Angular應用的多語言設置問題解決示例

    這篇文章主要為大家介紹了Angular應用的多語言設置問題解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • AngularJS學習筆記之基本指令(init、repeat)

    AngularJS學習筆記之基本指令(init、repeat)

    AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。ng-app 指令初始化一個 AngularJS 應用程序。ng-init 指令初始化應用程序數(shù)據(jù)。ng-model 指令把應用程序數(shù)據(jù)綁定到 HTML 元素。
    2015-06-06
  • Angular2實現(xiàn)組件交互的方法分析

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

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

最新評論