demo.html

 <!doctype html>
 <html ng-app="freefedApp">
   <head>
     <title>angular應(yīng)用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)聽(tīng)directiveClick事件
     $scope.$on('directiveClick',function(event,param){
        console.log( param );  // 打印結(jié)果 {title : '我是來(lái)自指令子級(jí)作用域'}
     });

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

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

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

事件對(duì)象屬性

$on中的event事件對(duì)象屬性如下：

•targetScope(作用域?qū)ο?

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

•currentScope(作用域?qū)ο?

當(dāng)前處理事件的作用域

•name(字符串)

正在處理事件的名稱

•stopPropagation(函數(shù))

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

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

•defaultPrevented(布爾值)

可以通過(guò)判斷defaultPrevented屬性來(lái)判斷父級(jí)傳播的事件是否可以去忽略

以上這篇淺談angularJS中的事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: