angular之$on、$emit、$broadcast
1.$scope.$on
view事件
//View被加载但是DOM树构建之前时:
$scope.$on('$viewContentLoading', function(event, viewConfig){ ... });
//View被加载而且DOM树构建完成时:
$scope.$on('$viewContentLoaded', function(event){ ... });
//路由路径发生改变时 current:要到达的路径 previous:上一个路径
$scope.$on('$locationChangeStart', function (event, current, previous) { });
//销毁事件
$scope.$on('$destroy', function () { });
ng-route路由有几个常用的事件:
$routeChangeStart:这个事件会在路由跳转前触发
$routeChangeSuccess:这个事件在路由跳转成功后触发
$routeChangeError:这个事件在路由跳转失败后触发
$scope.$on("$routeChangeStart",function(event, current, previous){ });
页面刷新:$route.reload();
ui-router
使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由。每一个状态都对应着一个页面,因此对路由状态改变的监听也变的十分重要。可以使用:$rootScope.$on(…….)监听
$stateChangeStart: 表示状态切换开始
$stateNoFound:没有发现
$stateChangeSuccess:切换成功
$stateChangeError:切换失败
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })
回调函数的参数解释:event:当前事件的信息,toState:目的路由状态,toParams:传到目的路由的参数,fromState:起始路由状态,toParams:起始路由的参数;
2.父子controller传值
子级传递数据给父级
// 子级传递
$scope.checkLoggedIn = function(type) {
$scope.transferType = type;
$scope.$emit('transfer.type', type);
} // 父级接收
$scope.$on('transfer.type', function(event, data) {
$scope.transferType = data;
});
$scope.checkLoggedIn = function() {
var type = $scope.transferType;
}
父级传递数据给子级
// 父级传递
$scope.transferType = '';
$scope.checkLoggedIn = function(type) {
$scope.transferType = type;
$scope.$broadcast('transfer.type', type);
} // 子级接收
$scope.transferType = '';
$scope.$on('transfer.type', function(event, data) {
$scope.transferType = data;
});
$scope.checkLoggedIn = function() {
var type = $scope.transferType;
}
angular之$on、$emit、$broadcast的更多相关文章
- Angular页面传参的四种方法
1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...
- 迷你MVVM框架 avalonjs 入门教程
新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-contro ...
- angularjs项目的页面跳转如何实现
链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
- angularjs的事件 $broadcast and $emit and $on
angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...
- Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
$emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...
- Angular $broadcast和$emit和$ond实现父子通信
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- angular之$broadcast、$emit、$on传值
文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...
随机推荐
- JAVA 集合随笔
JAVA中提供了现成操纵数据的集合,使得我们在开发中基本不用自己动手实现复杂的数据结构,来保存和操纵数据. 所以当我们有了基本的数据结构知识,会合理利用JAVA提供的集合就好啦. JDK1.8;(仅列 ...
- SQL SERVER中的二种获得自增长ID的方法
新方法 insert into TblClass output inserted.tClassId values('Hi~班','英语班') 老方法 insert into 表名 () values ...
- 《UltraFast设计法实践》系列目录
最近准备开始潜心学习快速和高效的时序收敛设计了,突然想就把整个学习过程做成一个博客系列吧,虽然想想就很激动(技术狗就这么点出息--),但希望坚持下来. 这篇做个目录或者索引,不断向其中添加学习内容. ...
- leetcode 191:统计1的个数;5 最长回文串;54,59 蛇形矩阵
class Solution { public: int hammingWeight(uint32_t n) { ; //统计次数 ){ n &= (n-); //每次消掉一个1 k++; / ...
- R 拆分EXCEL成多个文件
setwd("C:/Rworkfile") install.packages("readxl") library(readxl) www<-read_ex ...
- CSAPP阅读笔记-变长栈帧,缓冲区溢出攻击-来自第三章3.10的笔记-P192-P204
一.几个关于指针的小知识点: 1. malloc是在堆上动态分配内存,返回的是void *,使用时会配合显式/隐式类型转换,用完后需要用free手动释放. alloca是标准库函数,可以在栈上分配任 ...
- (转)PXE+kickstart无人值守安装CentOS 7
kickstart+cobbler系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 本文是PXE+kickstart无人值守安装CentOS ...
- centos7 配置php-fpm
1.复制相应的文件cp /usr/local/php7/etc/php-fpm.conf.default /usr/local/php7/etc/php-fpm.confcp /usr/local/p ...
- centos 7编译安装php7
0.下载php源代码 http://www.php.net/releases/ 1.配置编译环境 yum install -y gcc gcc++ libxml2-devel openssl open ...
- MySQL的模糊搜索
1.模糊搜索 第一时间我马上想到了关键字 like 1.1.所要查询的字段中包含特定 字符,但不确定其位置,使用两个%包起来 select * from phone where provider li ...