angular 控件间的通信
先引入
设置meta元素
http://blog.sina.com.cn/s/blog_51048da70101cgea.html
//设置 虚拟窗口的大小等于设备的大小
<meta name="viewport" content="width=device-width, user-scalable=no,init-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
//格式检测
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
//引用 angular.min.js
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
//代码如下
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>控制器间的通信</title>
</head>
<body>
<div ng-controller="main">
main controller
<div ng-controller="child">
child controller
</div>
<button ng-click="broadcast()">$broadCast</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myapp=angular.module("myapp",[]);
myapp.controller("main",function($scope,$rootScope){
var name = "var main->child";
$scope.name="main";
$rootScope.age = 18; //ng-app 全局
//父级发送接收信息事件
$scope.$on("childData",function(e,d){ //event事件 data数据
console.log(e.targetScope) //获得子控件的 $scope
})
$scope.broadcast=function(){
$scope.$broadcast("mainData",name)
}
})
myapp.controller("child",function($scope,$rootScope){ //$scope 作用域
var name = "var name->child";
$scope.name="child";
console.log($rootScope) // 18
//子级控件 收发信息事件
$scope.$on("mainData",function(e,d){
console.log(d)
})
$scope.$emit("childData","发送给父控件")
})
</script>
</body>
</html>
//访问不同作用域的变量
//方法一
//知识点: $scope是当前controller控制器下的作用域
// $rootScrope ng-app 下的作用域
//方法二
// $on 监听事件 $emit子控件向父控件发送事件 $broadcast 向子控件发送信息时需谨慎(所有的子控件都可以收到)
//e.targetScope 获得事件发送的主体scope作用域
angular 控件间的通信的更多相关文章
- Android各组件/控件间通信利器之EventBus
实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每 ...
- [WPF]获取控件间的相对位置
原文:[WPF]获取控件间的相对位置 [WPF]获取控件间的相对位置 周银辉 我们知道WPF有着比较灵活的布局方式,关于某个控件的坐标,Canv ...
- qt 布局管理按钮控件间有空隙?
定义了几个按钮控件,想要按钮间没有空隙,我使用setspaces(0)来设置它们之间的间隔. 结果控件间还是有空隙,如图 我对控件所在的widget的背景进行设置,(会把style传到子控件)发现结果 ...
- TableView 中cell间的分割线(及其他控件间(内)的分割线)设置
知识点: 1.在应用开发中,tableView中自带的分割线满足不了开发需求: 2.一些子空间中添加一些类似于分割线一样的东西等······ 补充知识点:导航条左侧或右侧的控件尽量靠近屏幕边缘设置 需 ...
- WPF 实现控件间拖拽内容
想实现这样一个常用功能:在ListBox的一个Item上点住左键,然后拖拽到另外一个控件(如ListView中),松开左键,数据已经拖拽过来. 步骤如下: 1. 设置ListBox 的AllowDro ...
- VB控件间的拖放
新建工程,放置控件Picture1,Text1,Text2,复制下面的代码运行 Text1和Text2可以互相拖放,也可以将Picture1拖放给Text1,Text2. Private Sub Fo ...
- 在VC++中怎样改变控件间的TAB切换顺序?
在编辑界面按下ctrl+D键,就会出现所有控件的Tab键顺序,按照自己想要的顺序依次点击控件,就可以重新安排顺序.
- 在ListBox控件间交换数据
实现效果: 知识运用: ListBox控件的SelectedItem属性 //获取或设置ListBox控件中当前选定的数据项 public Object SelectedItem{ get;set; ...
- Angular 4 组件间的通信
一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的h ...
随机推荐
- 二、Spring Cloud之注册中心 Eureka
前言 算是正式开始学习 spring cloud 的项目知识了,大概的知道Springcloud 是由众多的微服务组成的,所以我们现在一个一个的来学习吧. 注册中心,在微服务中算是核心了.所有的服务都 ...
- Jmeter+Jenkins 搭配进行接口测试
单纯通过Jmeter的界面进行Web的接口测试,效率低下.为此将Jmeter的接口测试与Jenkins联合,实现持续集成.配置完成后,只需修改运行的Jmeter脚本即可,运行结束后测试结果发送到指定邮 ...
- Linux磁盘管理之LVM逻辑卷快照
一.快照的工作原理 所谓快照就是将当时的系统数据记录下来,在未来若有数据变动,则会将变更前的数据放入快照区进行保存.我们可理解为快照就是给系统拍了一张照片,记录当时系统在拍快照的状态.只不过现实生活中 ...
- HTML 图片(image) 左右滑动
1.需求 需要用简单动画的形式将一组图片进行展示,图片数量不固定 2.效果如下: 3.思路 说到动画,首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧,然后 ...
- IO流之处理流用法总结
处理流之一:缓冲流1.为了提高数据读写的速度,Java API提供了带缓冲功能的流类,在使用这些流类时,会创建一个内部缓冲区数组,缺省使用8192个字节(8Kb)的缓冲区. 2.缓冲流要“套接”在相应 ...
- Python爬虫入门教程 33-100 电影评论数据抓取 scrapy
1. 海王评论数据爬取前分析 海王上映了,然后口碑炸了,对咱来说,多了一个可爬可分析的电影,美哉~ 摘录一个评论 零点场刚看完,温导的电影一直很不错,无论是速7,电锯惊魂还是招魂都很棒.打斗和音效方面 ...
- Spring Boot2 系列教程 (十四) | 统一异常处理
如题,今天介绍 SpringBoot 是如何统一处理全局异常的.SpringBoot 中的全局异常处理主要起作用的两个注解是 @ControllerAdvice 和 @ExceptionHandler ...
- 关于Log4Net的使用及配置方式
目录 0.简介 1.安装程序包 2.配置文件示例 3.日记的级别:Level 4.日志的输出源:Appenders 5.日志格式:Layout 6.日志文件变换方式(回滚方式):RollingStyl ...
- xLua下使用lua-protobuf
本文发表于程序员刘宇的博客,转载请注明来源:https://www.cnblogs.com/xiaohutu/p/12168781.html protobuf作为一种通用套接字格式,各种插件里,最本质 ...
- newSQL 到底是什么?
数据库发展至今已经有3代了: SQL,传统关系型数据库,例如 MySQL noSQL,例如 MongoDB newSQL SQL 的问题 互联网在本世纪初开始迅速发展,互联网应用的用户规模.数据量都越 ...