angularjs中的事件传播$emit,$broadcast,$on

摘要:
stopPropagation(函数)stopPropagation()函数取消通过$emit触发的事件的进一步传播。$locationChangeSuccess当且仅当浏览器的地址成功变更,又没有阻止$locationChangeStart事件的情况下,$locationChangeSuccess事件会从$rootScope上广播出来。$routeChangeStart在路由变更发生之前,$routeChangeStart事件从$rootScope发送出来。ngView指令使用$routeChangeSuccess事件来获悉何时实例化控制器并渲染视图。$destroy在作用域被销毁之前,$destroy事件会在作用域上广播。

在这里写的技术点 一部分参考AngularJs权威教程一部分参考的是其它的博主的知识点

事件 :如同浏览器响应浏览器层的事件,比如鼠标点击、页面滚动那样,Angular应用也可以响应Angular事件.
这使我们在我们应用中嵌套各组件之间进行通信,即使这些组件在创建的时候并未考虑其他组件.我们可以认为事件是在应用中传播的事件信息片段,通常包含应用中发生的事件信息

注意: AnjularJs事件系统并不与浏览器中的事件系统相通,这意问着我们只能在作用域上监听Angular事件而不是在DOM事件

1.$emit事件函数的调用中,事件从子作用域冒泡到父作用域

$emit()函数可以接受两个参数

  • name(字符串 要发生的事件的名字)
  • args(集合 一个参数的集合,作为对象传递到事件监听器中。)
  • 从监听器中发出的切异常都会传递到$exceptionHandler服务中

2.$broadcast事件的函数调用中是向下传递事件 其参数和$emit一样

3.$on事件的监听 on参数

  • 进行监听的事件的名字
  • 函数 (event ,data) data 是事件中所传递的信息 event 则是事件对象

4.事件对象的属性() 这些可以通过函数event对象进行操作

  • targetScope(作用域对象)这个属性是发送或者广播事件的作用域。
  • currentScope(作用域对象)这个对象包含了当前处理事件的作用域。
  • name(字符串)这个字符串是触发之后,我们正在处理的事件名称。
  • stopPropagation(函数)stopPropagation()函数取消通过$emit触发的事件的进一步传播。
  • preventDefault(函数)preventDefault把defaultPrevented标志设置为true。尽管不能停止事件的传播,我们可以告诉子作用域无需处理这个事件(也就是说,可以安全地忽略它们)。
  • defaultPrevented(布尔值) 调用preventDefault()会把defaultPrevented设置为true。

5.核心系统的$emitted事件

  • $includeContentLoaded $includeContentLoaded事件当ngInclude的内容重新加载时,从ngInclude指令上触发。
  • $includeContentRequested $includeContentRequested事件从调用ngInclude的作用域上发送。每次ngInclude的内容 被请求时,它都会被发送。
  • $viewContentLoaded $viewContentLoaded事件每当ngView内容被重新加载时,从当前ngView作用域上发送。

6.核心系统的$broadcast事件

  • $locationChangeStart 当Angular从$location服务(通过$location.path()、$location.search()等)对浏览器 的地址作更新时,会触发$locationChangeStart事件。
  • $locationChangeSuccess 当且仅当浏览器的地址成功变更,又没有阻止$locationChangeStart事件的情况下,$locationChangeSuccess事件会从$rootScope上广播出来。
  • $routeChangeStart 在路由变更发生之前,$routeChangeStart事件从$rootScope发送出来。也就是在路由服务开始解析路由变更所需的所有依赖项时。
  • $routeChangeSuccess 在所有路由依赖项跟着$routeChangeStart 被解析之后, $routeChangeSuccess 被从$rootScope上广播出来。ngView指令使 用$routeChangeSuccess事件来获悉何时实例化控制器并渲染视图。
  • $routeChangeError 如果路由对象上任意的resolve属性被拒绝了,$routeChangeError就会被触发(比如它们失 败了)。这个事件是从$rootScope上广播出来的。
  • $routeUpdate 如果$routeProvider上的reloadOnSearch属性被设置成false,并且使用了控制器的同一个实例,$routeUpdate事件会被从$rootScope上广播。
  • $destroy 在作用域被销毁之前,$destroy事件会在作用域上广播。这个顺序给子作用域一个机会,在父作用域被真正移除之前清理自身。

关于代码的测试

<!DOCTYPE html>
<!-- 这里是初始化anglularJs 的一个应用程序 -->
<html>
<head>
<meta charset="UTF-8">
<title>http练习</title>
<script type="text/javascript" src="http://t.zoukankan.com/js/angular-1.3.0.js"></script>
    <style type="text/css">div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius:5px}
    </style>
</head>

<body  ng-app="app">
   
    <!-- 创建一个父级作用域  -->
    <div ng-controller="ParentController">
      <input type="button" ng-click='parentCl()' value="点击父亲">
           <div ng-controller="OneSelfController">
             <input type="button" ng-click="clickeMe()" value="点击自己"/>
             <!-- 创建一个子级作用域 -->
           <div ng-controller="ChildController">自己的 子级作用域
           </div>
         </div>
         <div ng-controller="siblingsController">自己的平级作用域
         </div>
    </div>
    
<script type="text/javascript">
      var app=angular.module("app",[]);
      app.controller('OneSelfController',function($scope){
         $scope.clickeMe=function(){
             alert('你好');
             //向子作用域传播数据
             $scope.$broadcast('sendChild','给子控制器传递数据');
             //向父作用域传播数据(冒泡)
             $scope.$emit('sendParent','冒泡到父元素')
          };
          
      });
      app.controller('ParentController',function($scope){
          //监听$emit()事件的
          $scope.$on('sendParent',function(event,data){
              console.log('OneSelfController传递过来的数据',data,event.name,event);
          });
          $scope.parentCl=function(){
              //向所有子作用域传递数据
              alert('你好');
              $scope.$broadcast('sendAllChild','让siblingsController接收到')
          };
          
      });
      app.controller('ChildController',function($scope){
          //监听
          $scope.$on('sendChild',function(event,data){
              console.log('ChildCtrl',data,event.name,event);
          });
          
      })
      app.controller('siblingsController',function($scope){
          $scope.$on('sendAllChild',function(event,data) {
                         console.log('值过来吧', data);
                    });
          //传播不会向平级传播的
          $scope.$on('sendParent', function(event,data) {
                          alert('你是谁');
                          console.log('平级得不到值', data);
                       });
                      $scope.$on('sendChild', function(event,data) {
                          console.log('平级得不到值', data);
                     });
      });
</script>
</body>
</html>

免责声明:文章转载自《angularjs中的事件传播$emit,$broadcast,$on》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇转 SaaS应用十大关键NFR[持续更新]UnsatisfiedLinkError常见问题及解决方案下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

用pygame实现打飞机游戏-6-显示敌机

1 #coding=utf-8 2 importpygame 3 #导入pygame模块 4 from pygame.locals import * 5 #导入检测键盘的子模块 6 importtime 7 classAircraftCoordinate(object): 8 def __init__(self,screen): 9...

android控件拖动,移动、解决父布局重绘时控件回到原点

  这是主要代码: 保证其params发生改变,相对于父布局的位置就能达到位置移动到原来的位置 // 每次移动都要设置其layout,不然由于父布局可能嵌套listview,当父布局发生改变冲毁(如下拉刷新时)则移动的view会回到原来的位置RelativeLayout.LayoutParams lpFeedback = new RelativeLayo...

QT基础三

4.1The Central Widget QMainWindow的中央区域可以被任何类型的widget占据。 4.2Subclassing QTableWidget QTableWidget会自动创建QTableWidgetItem来存储用户的输入。 QTableWidgetItem类并不是widget,而是一个纯粹的data class。 QTabeW...

Web--js高级--11月30日随笔

一: 面向对象的三种方式: 1.单例模式 2.工厂模式 3.构造函数 js天生自带的类 Object 基类: Function Array Number Math Boolean Date Regexp String 二:事件 浏览器客户端上客户出发的行为都成为是事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发。 通过 obj.事件名=...

jQuery中hover()的事件委托

事件委托:事件在页面加载之前,或者在事件之后追加的元素,需要用的事件委托 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:使...

火狐浏览器(firefox)中js要注意的问题

1.出现错误调用error方法或者ajax请求了多次,那么极有可能是异步请求的原因。 添加async : false , ->async. 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。 -> async 设置为 fals...