浅谈angularJS中的事件

(编辑:jimmy 日期: 2024/10/3 浏览:2)

什么是事件

"color: #ff0000">"color: #ff0000">"color: #ff0000">"color: #000000">$on()方法带有两个参数:

event  事件对象

param  参数集合,$broadcast()、$emit()传递过来的参数集合  示例:

demo.html

 <!doctype html>
 <html ng-app="freefedApp">
   <head>
     <title>angular应用demo</title>
     <script src="/UploadFiles/2021-04-02/angular.js">


app.js

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

 /*声明控制器*/
 module.controller('freefedCtrl',['$scope',function($scope){
     //监听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 : '我是来自指令子级作用域'});
         });

        //监听parentBroadcast事件广播
        scope.$on('parentBroadcast',function(event,msg){
           console.log( msg );  //打印结果 { msg : 请注意接收父级广播 }
        });
       }
    };
 });

事件对象属性

$on中的event事件对象属性如下:

•targetScope(作用域对象)

发送或者广播事件的作用域

•currentScope(作用域对象)

当前处理事件的作用域

•name(字符串)

正在处理事件的名称

•stopPropagation(函数)

stopPropagation()函数取消通过$emit触发事件的进一步传播

•preventDefault(函数) preventDefault()把defaultprevented标志设置为true,尽管不能停止事件传播,但是子作用域可以通过defaultprevented标志知道无需处理这个事件

•defaultPrevented(布尔值)

可以通过判断defaultPrevented属性来判断父级传播的事件是否可以去忽略

以上这篇浅谈angularJS中的事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。