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的更多相关文章

  1. Angular页面传参的四种方法

    1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...

  2. 迷你MVVM框架 avalonjs 入门教程

    新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-contro ...

  3. angularjs项目的页面跳转如何实现

    链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...

  4. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  5. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  6. angularjs的事件 $broadcast and $emit and $on

    angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...

  7. Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on

    $emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...

  8. Angular $broadcast和$emit和$ond实现父子通信

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  9. angular之$broadcast、$emit、$on传值

    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...

随机推荐

  1. hive join的三种优化方式

    原网址:https://blog.csdn.net/liyaohhh/article/details/50697519 hive在实际的应用过程中,大部份分情况都会涉及到不同的表格的连接, 例如在进行 ...

  2. NSInvocation 调用block clang代码转换c++

    NSInvocation 调用block cpp 转换 fatal error: 'UIKit/UIKit.h' file not found https://blog.csdn.net/yst199 ...

  3. 51nod 1943 联通期望 题解【枚举】【二进制】【概率期望】【DP】

    集合统计类期望题目. 题目描述 在一片大海上有 \(n\) 个岛屿,规划建设 \(m\) 座桥,第i座桥的成本为 \(z_i\),但由于海怪的存在,第 \(i\) 座桥有 \(p_i\) 的概率不能建 ...

  4. MonoGame2D - MonoGame的2D威力加强版

    简介MonoGame2D 是一款基于MonoGame的扩展工具包,对MonoGame的2D开发方面进行了扩展,主要增加了精灵,字体,地图,组件,GUI等游戏开发中的一些基本元素,以更方便快捷地进行2D ...

  5. idea没有tomcat选项在setting也没有Application Servers

    原因:dea未正常关闭,重启后发现,Tomcat的选项不见了,File->Setting->Build,Excution,Deployment里面Application Servers也不 ...

  6. (转)搭建企业内部yum仓库(centos6+centos7+epel源)

    搭建企业内部yum仓库(centos6+centos7+epel源) 原文:https://www.cnblogs.com/nulige/p/6081192.html https://www.linu ...

  7. sessionStorage、localStorage技术相关以及商家sid、sbid记录相关、vue相关问题

    一个项目的需求如下: 作为第一个第三方平台,我们可以提供给不同的商家技术支持,即在一个url后面根据不同的商家来提供不同的查询字符串(包含sid和sbid),所以为了得到这个商家的信息,我们需要使用解 ...

  8. 在页面中嵌入svg的几种方法

    //在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...

  9. 使用SubstanceDesign和Unity插件ShaderForge制作风格化火焰

    使用 SubstanceDesign 软件可以制作shader用的特殊图片,原来真有这种软件,一直好奇这种图片怎么做的 https://www.kancloud.cn/hazukiaoi/sd_sf_ ...

  10. FocusBI: 数据仓库 (原创)

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...