ng $scope与$rootScope的关系
$scope与$rootScope的关系：
①不同的控制器之间 是无法直接共享数据
②$scope是$rootScope的子作用域对象
$scope的id是随着控制器的加载顺序依次递增，$rootScope的id是1
③不同控制器之间如何通信？？
1、借助于$rootScope
2、既然子作用域对象可以调用父作用域对象的值或者方法，就可以通过控制器之间的嵌套来实现通信
3、事件
父-》子
$scope.$broadcast('eventName',args)
子-》父
$scope.$emit('eventName',args)
绑定事件：
$scope.$on('eventName',func)
效果：
代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body> <div ng-controller="parentCtrl">
<button ng-click="toChild()">
向child传值
</button> <div ng-controller="childCtrl">
<p>{{data}}</p>
<button ng-click="toParent()">向parent传值</button>
</div> </div> <script>
var app = angular.module('myApp', ['ng']); app.controller('parentCtrl', function ($scope) {
$scope.toChild = function () {
//通过事件传值 约定事件名称：toChildEvent
$scope.$broadcast(
'toChildEvent',
' msg from parent')
} //绑定toParentEvent事件的处理函数
$scope.$on('toParentEvent',
function (event, result) {
console.log(result);
}) }); app.controller('childCtrl', function ($scope) {
//绑定事件 $on
$scope.$on('toChildEvent',
function (event, result) {
console.log(arguments);
$scope.data = result;
}); $scope.toParent = function () {
//向父级元素通过事件传值 $emit 约定:toParentEvent
$scope.$emit(
'toParentEvent',
'msg to my parent'
);
} }); </script>
</body>
</html>
ng $scope与$rootScope的关系的更多相关文章
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系
Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...
- Part 37 Difference between $scope and $rootScope
In this video we will discuss the difference between $scope and $rootScope. The main difference is t ...
- Angular $scope和$rootScope
<!DOCTYPE html><html ng-app='myModule'><head lang="en"> <meta charset ...
- AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...
- (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- angular源码分析：angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- AngularJS的$rootScope和$scope联系和区别
scope是html和单个controller之间的桥梁,数据绑定就靠他了. rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controlle ...
随机推荐
- IOS UIApplicationMain函数
对于UIKIT_EXTERN int UIApplicationMain(int argc, char *argv[], NSString *principalClassName, NSString ...
- POJ - 3177 Redundant Paths （边双连通缩点）
题意:在一张图中最少可以添加几条边,使其中任意两点间都有两条不重复的路径(路径中任意一条边都不同). 分析:问题就是最少添加几条边,使其成为边双连通图.可以先将图中所有边双连通分量缩点,之后得到的就是 ...
- Hadoop创始人Doug Cutting寄语2017：五种让开源项目成功的方法
原文链接:http://www.infoq.com/cn/news/2017/01/Hadoop-2017-5-open-source?utm_source=tuicool&utm_mediu ...
- Java开发资料汇编
Java开发常识资料 一.Java基础JSE 核心基础(程序设计语言): <Think in java> (参考阅读:<Core Java>JAVA2核心技术 ...
- ICMP与PING解析
1.ICMP格式 ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制消 ...
- python3爬虫全国地址信息
PHP方式写的一团糟所以就用python3重写了一遍,所以因为第二次写了,思路也更清晰了些. 提醒:可能会有502的错误,所以做了异常以及数据库事务处理,暂时没有想到更好的优化方法,所以就先这样吧.待 ...
- 20145201 《Java程序设计》第一周学习总结（修改）
# 20145201 <Java程序设计>第一周学习总结 ## 教材学习内容总结 万事开头难,终于开始学习了Java.寒假的时候看到老师的要求确实有点慌,但是这周翻开书,从书本知识第一行学 ...
- 20145219 《Java程序设计》第06周学习总结
20145219 <Java程序设计>第06周学习总结 教材学习内容总结 InputStream与OutputStream 串流设计 1.串流:Java将输入/输出抽象化为串流,数据有来源 ...
- iOS设计模式探索
常用的 23 种设计模式 不管是 .NET 中的 C# 语言,还是 Java.VB.NET.C++ 或 Objective-C 语言,面向对象语言在设计模式的层面上都是相通的,只不过在设计模式的具体实 ...
- 2 Powershell与Cmd以及Unix/Linux Shell
上篇文章我说道,windows为了改变用户对其console界面的诟病,于是就从windows vista开始,计划要改变这种局面,于是就有 了Powershell的出现. 1.兼容shell命令 ...