路由的事件

事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应.

一共有4个事件用来监听路由的状态变化: $routeStartChange, $routeChangeSuccess, $routeChangeError, $routeUpdate.

其中最常用的是前两个,这里稍微解释一下.

(1) $routeStartChange

看名字就能猜出来它表示的是路由开始变化的事件,在浏览器地址栏发生变化之前AngularJS会先广播一下这个事件.路由会开始加载所有需要的依赖,模板和resolve部分的内容也会注入.

1
2
3
4
5
6
angular.module('myApp', [])
  .run(['$rootScope''$location'function($rootScope, $location){
    $rootScope.$on('$routeChangeStart'function(evt, next, current){
    console.log('route begin change');
  }); 
}]);

解释一下事件的参数,evt是事件对象,可以从中读取到一些route的信息.next是将要导航到的路由,current是当前的URL.

可以看见在这个时期我们可以做很多有用的事,因为此时仅仅是路由开始变化,对应的内容都还没来得及发生改变.这里我们可进行permission的校验,loading画面的加载,对应路由信息的读取等等.

(2) $routeChangeSuccess

在路由的所有依赖都被注入加载后,AngularJS会对外广播路由跳转成功的事件.

1
2
3
4
5
6
angular.module('myApp', [])
  .run(['$rootScope''$location'function($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess'function(evt, current, previous) {
      console.log('route have already changed');
    }); 
}])

这里也稍微解释下三个参数,evt是AngularJS事件对象,current是当前所处路由,previous是上一个路由.

剩下两个不太常用的事件,大家去看官方API说明吧,这里不介绍了

----------------------------------------------------------------------

  • $emit只能向parent controller传递event与data( $emit(name, args) )
  • $broadcast只能向child controller传递event与data( $broadcast(name, args) )
  • $on用于接收event与data( $on(name, listener) )
 

本节课程源码:

1
2
3
4
5
6
7
8
9
10
     
<div ng-controller="ParentCtrl">              <!--父级-->
  <div ng-controller="SelfCtrl">              <!--自己-->
    <a ng-click="click()">click me</a>
    <div ng-controller="ChildCtrl"></div>     <!--子级-->
  </div>
  <div ng-controller="BroCtrl"></div>         <!--平级-->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var app = angular.module('myApp', []);
app.controller('SelfCtrl', function($scope) {
  $scope.click = function () {
    $scope.$broadcast('to-child', 'child');
    $scope.$emit('to-parent', 'parent');
  }
});
 
app.controller('ParentCtrl', function($scope) {
  $scope.$on('to-parent', function(event,data) {
    console.log('ParentCtrl', data);       //父级能得到值
  });
  $scope.$on('to-child', function(event,data) {
    console.log('ParentCtrl', data);       //子级得不到值
  });
});
 
app.controller('ChildCtrl', function($scope){
  $scope.$on('to-child', function(event,data) {
    console.log('ChildCtrl', data);      //子级能得到值
  });
  $scope.$on('to-parent', function(event,data) {
    console.log('ChildCtrl', data);      //父级得不到值
  });
});
 
app.controller('BroCtrl', function($scope){
  $scope.$on('to-parent', function(event,data) {
    console.log('BroCtrl', data);         //平级得不到值
  });
  $scope.$on('to-child', function(event,data) {
    console.log('BroCtrl', data);         //平级得不到值
  });
});

在$on的方法中的event事件参数,其对象的属性和方法如下

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 如果调用了`preventDefault`则为true

----------------------------------------------------------

父传($scope.$broadcast)子接收($scope.$on)
angular.module('myApp', [])
.controller('ParentCtrl', ['$scope', function($scope) {
$scope.message = "Child updated from parent controller";

$scope.clickFunction = function() {
$scope.$broadcast('update_parent_controller', $scope.message);
};
}
])
.controller('ChildCtrl', ['$scope', function($scope) {
$scope.message = "Some text in child controller";

$scope.$on("update_parent_controller", function(event, message) {
$scope.message = message;
});
}
]);

Here a plunker for a live demo.

Instead, if it need to send data from the SecondController (child) to the FirstController (parent), it should use the $emit method.
Here the javascript code:
子传($scope.$emit)父接收($scope.$on)
angular.module('myApp', [])
.controller('ParentCtrl', ['$scope', function ($scope) {
$scope.message = "Some text in parent";
$scope.$on("update_parent_controller", function(event, message){
$scope.message = message;
});

}])
.controller('ChildCtrl', ['$scope', function ($scope) {
$scope.clickFunction = function() {
$scope.message = "Parent updated";

$scope.$emit('update_parent_controller', $scope.message);
}

}]);

Here a plunker for a live demo.

Finally, here a little trick where two controller have no parent/child relationship.
It should pass data from one controller through $rootScope and the $broadcast method.
Here the javascript code:
兄弟传($rootScope.$broadcast)兄弟接收($rootScope.$on)
angular.module('myApp', [])
.controller('FirstCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.message = "Clicked!";

$rootScope.clickFunction = function() {
$rootScope.$broadcast("Update", $scope.message);
};
}])
.controller('SecondCtrl', ['$scope','$rootScope', function($scope,$rootScope) {
$scope.message = "Waiting for a click...";

$rootScope.$on("Update", function(event, message) {
$scope.message = message;
});
}]);

Here a plunker for a live demo.

----------------------------------------------------------------------------------

发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);

接收消息: $scope.on(name,function(event,data){ });

区别: $emit 广播给父controller   $broadcast 广播给子controller

broadcast 是从发送者向他的子scope广播一个事件。

这里就是ParentController发送, ParentController 和 ChildController 会接受到, 而MainController是不会收到的

$emit 广播给父controller,父controller 是可以收到消息

$on 有两个参数function(event,msg)  第一个参数是事件对象,第二个参数是接收到消息信息

var app = angular.module('onBroadcastEvent', ['ng']);

app.controller('MainController', function($scope) {
$scope.$on('To-MainController', function(event,msg) {
console.log('MainController received:' + msg);
});
}); app.controller('ParentController', function($scope) {
$scope.click = function (msg) {
$scope.$emit('To-MainController',msg + ',from ParentController to MainController');
$scope.$broadcast('To-ChildController', msg + ',from ParentController to ChildController');
$scope.$broadcast('To-BrotherController', msg + ',from ParentController to BrotherController');
}
}); app.controller('ChildController', function($scope){
$scope.$on('To-ChildController', function(event,msg) {
console.log('ChildController received:' + msg);
});
}); app.controller('BrotherController', function($scope){
$scope.$on('To-BrotherController', function(event, msg) {
console.log('BrotherController received:' + msg);
});
});
 
 

angularJS 事件广播与接收[转]的更多相关文章

  1. AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅

    不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...

  2. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  3. angularJS 事件广播与接收

    发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...

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

    Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...

  5. node.js接收异步任务结果的两种方法----callback和事件广播

    事件广播 发送方调用emit方法,接收方调用on方法,无论发送方或是接收方,都会工作在一个频道 声明了一个模块,用于读取mime.json中的记录 var fs = require('fs'); va ...

  6. [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播

    一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...

  7. laravel 事件广播

    Laravel 5.1 之中新加入了事件广播的功能,作用是把服务器中触发的事件通过websocket服务通知客户端,也就是浏览器,客户端js根据接受到的事件,做出相应动作.本文会用简单的代码展示一个事 ...

  8. JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  9. Android的有序广播和无序广播(解决安卓8.0版本之后有序广播的接收问题)

    前言 Google从Android8.0版本开始,对在清单文件中静态注册广播做了限制. *** 特殊广播(动态注册广播接收者) 说:有序广播和无序广播之前,咱们先来说下Android中一些特殊的广播如 ...

随机推荐

  1. C#编程(二十七)----------创建泛型类

    创建泛型类 首先介绍一个一般的,非泛型的简化链表类,可以包含任意类型的对象,以后再把这个类转化为泛型类. 在立案表中,一个元素引用下一个元素.所以必须创建一个类,他将对象封装在链表中,并引用下一个对象 ...

  2. Oracle的tnsnames.ora 监听配置文件详解

    监听配置文件 为了使得外部进程 如 CAMS后台程序 能够访问 Oracle 数据库 必须配 置 Oracle 网络服务器环境 配置 Oracle 网络服务器环境是通过配置 listener.ora ...

  3. 关于 java,nio,bufferedreader,bytebuffer

    有没有一种方法来读取的ByteBuffer有一个BufferedReader,而无需将其转换为String优先?我想读通过一个相当大的 ByteBuffer作为文本行和我想避免它写入磁盘性能方面的原因 ...

  4. Leetcode刷题记录:构建最大数二叉树

    题目要求,题目地址 给定一个不含重复数字的数组,最大二叉树构建规则如下: 1.根是数组中最大的数字 2.左边的子树是最大数字左边的内容 3.右边的子树是最大数字右边的内容 答案 class Solut ...

  5. idea创建springcloud项目图文教程(EurekaServer注册中心)

    http://blog.csdn.net/hcmony/article/details/77854999 idea创建springcloud项目图文教程(EurekaServer注册中心)(六) 1, ...

  6. [转]IOS下如何判断机器是否越狱

    转自: http://blog.csdn.net/kaizi318/article/details/9135385 关于判断iPhone是否是jailbreak机器,可参考如下代码: static c ...

  7. jquery click()方法模拟点击事件对a标签不生效的解决办法

    阅读数:8971 <a href="www.baidu.com"></a> 1 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都 ...

  8. codevs 2190 有理逼近

    2190 有理逼近  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold   题目描述 Description 对于一个素数P,我们可以用一系列有理分数(分子.分母都是 ...

  9. C#如何使用SplitContainer控件实现上下分隔

    C#如何使用SplitContainer控件实现上下分隔 Orientation 属性设置为Horizontal 完美世界 http://www.23cat.com/Contents_51864.ht ...

  10. COCO数据集深入理解

    TensorExpand/TensorExpand/Object detection/Data_interface/MSCOCO/ 深度学习数据集介绍及相互转换 Object segmentation ...