angular view之间的数据传递
之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下。在angular 传递数据通俗的讲叫做 广播 ,在一些文章中,也叫做事件的发布与订阅,在angular中通过 发布与订阅制定了数据的传递,使用时,在出发点广播事件,这个事件后面的参数是传递的数据,在适当的位置去进行接收,具体到开发中,对应着$scope和$rootScope的$emit、$broadcast和$on方法。首先了解一下概念:
1.$scope与$scope之间的关系,$scope与$rootScope之间的关系
$rootScope是最顶部的大哥,是所有$scope的老大,而$scope与$scope之间,就比较多了,有可能是父子关系,也有可能是兄弟关系,angular为每一个controller分配一个独立的$scope,$scope之间的关系也就是由controller之间的关系来决定的。
<div ng-controller="ParentCtrl as parent">
{{ parent.data }}
<div ng-controller="SiblingOneCtrl as sib1">
{{ sib1.data }}
</div>
<div ng-controller="SiblingTwoCtrl as sib2">
{{ sib2.data }}
</div>
</div>
2.广播,接收与销毁
$broadcast和$emit用于广播事件,他们将事件名称和事件内容发布出去,就像是高考榜单一样,事件名称相当于考生的名字,而事件内容相当于考生的成绩等信息,而$broadcast和$emit的不同之处在于$broadcast是自上而下的广播,所有能听到的都可以对其进行反应。而$emit是自下而上的射箭,只有在箭矢的轨迹上才能对其做出反应。
$scope.$broadcast('EVENT_NAME', 'Data to send');
$scope.$emit('EVENT_NAME', 'Data to send');
$on用于接受事件,事件名称是订阅的唯一标识,每个考生看榜单时都要寻找自己的名字,然后根据自己的成绩等信息决定下一步应该报考什么学校:
$scope.$on('EVENT_NAME', function(event, args) {
// balabala
});
angular的销毁是在$on中,使用$on接收事件时会返回一个函数,而此函数就是用来退订事件的方法,就像是考生看到了自己的成绩后禀告父母大人,“商量着”选取学校填报志愿,而此志愿单就是结束整个高考榜单的结束:
// 接收事件返回用于销毁事件的函数
var deregister = $scope.$on('EVENT_NAME', function(event, args) {
// balabala
}); // 销毁事件
deregister();
ok 这就类似于backbone中的事件注册机,相比之下 trigger on 要更简单暴力一些,至于angular为什么要这么设计,我还只是一个初学者 不能理解。
angular view之间的数据传递的更多相关文章
- ASP.NET MVC3中Controller与View之间的数据传递总结
一. Controller向View传递数据 1. 使用ViewData传递数据 我们在Controller中定义如下: ViewData["Message_ViewData& ...
- ASP.NET MVC3中Controller与View之间的数据传递
在ASP.NET MVC中,经常会在Controller与View之间传递数据,因此,熟练.灵活的掌握这两层之间的数据传递方法就非常重要.本文从两个方面进行探讨: 一. Controller向Vie ...
- Asp.net MVC中 Controller 与 View之间的数据传递
在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...
- MVC中Controller与View之间的数据传递
一.Controller向View传递数据 Controller向View传递数据有3种形式: 通过ViewData传递 在Controller里面的Action方法中定义ViewData,并且赋值, ...
- Controller与View之间的数据传递
1)Controller向View传递数据ViewData["message"] = "Hello";//使用ViewData传递数据ViewBag.Time ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Activity之间的数据传递
最常用的Activity之间的数据传递. btnStartAty1.setOnClickListener(new View.OnClickListener() { @Override public v ...
- ASP.NET MVC 之控制器与视图之间的数据传递
今天,我们来谈谈控制器与视图之间的数据传递. 数据传递,指的是视图与控制器之间的交互,包括两个方向上的数据交互,一个是把控制器的数据传到视图中,在视图中如何显示数据,一个是把视图数据传递到控制器中, ...
- iOS开发中视图控制器ViewControllers之间的数据传递
iOS开发中视图控制器ViewControllers之间的数据传递 这里我们用一个demo来说明ios是如何在视图控制器之间传递重要的参数的.本文先从手写UI来讨论,在下一篇文章中讨论在storybo ...
随机推荐
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- shell注释
sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...
- 微信应用号(小程序)开发IDE配置(第一篇)
2016年9月22日凌晨,微信宣布“小程序”问世,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请.那么什么是“小程序”呢,来看微信之父怎么说 看完之后,相信大家大概都有些明白了吧 ...
- CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(71)-微信公众平台开发-公众号管理
系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...
- https 安全验证问题
最近为了满足苹果的 https 要求, 经过努力终于写出了方法 验证 SSL 证书是否满足 ATS 要求 nscurl --ats-diagnostics --verbose https://你的域名 ...
- WebAPI 2参数绑定方法
简单类型参数 Example 1: Sending a simple parameter in the Url [RoutePrefix("api/values")] public ...
- python之浅拷贝和深拷贝
1.浅拷贝 1>赋值:从下面的例子我们可以看到赋值之后新变量的内存地址并没有发生任何变化,实际上python中的赋值操作不会开辟新的内存空间,它只是复制了新对象的引用,也就是说除了b这个名字以外 ...
- java的poi技术读取Excel数据到MySQL
这篇blog是介绍java中的poi技术读取Excel数据,然后保存到MySQL数据中. 你也可以在 : java的poi技术读取和导入Excel了解到写入Excel的方法信息 使用JXL技术可以在 ...
- .NET跨平台之旅:在生产环境中上线第一个运行于Linux上的ASP.NET Core站点
2016年7月10日,我们在生产环境中上线了第一个运行于Linux上的ASP.NET Core站点,这是一个简单的提供后端服务的ASP.NET Core Web API站点. 项目是在Windows上 ...