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 ...
随机推荐
- Linux基础以及简单命令
1. UNIX是什么 UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序.特点:多用户和多任务 2. GNU项目与自由软件 GPL条款是为保证GNU软件可以自由地使用 ...
- Cpython-并发编程
阅读目录 一 背景知识 二 python并发编程之多进程 三 python并发编程之多线程 四 python并发编程之协程 五 python并发编程之IO模型 六 补充:paramiko模块 七 作业 ...
- NHibernate MappingException. No Persister
在另一个Visual Studio项目(议会mm.k.Infrastructure)我有我的映射文件(一个映射目录),我的hibernate.cfg.xml和一些仓库. 这是我的映射文件: <? ...
- 29最小的K个数
题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路: 利用快速排序的partion 来解决 如果基于数字的第 ...
- cdoj1342郭大侠与甲铁城
地址:http://acm.uestc.edu.cn/#/problem/show/1342 题目: 郭大侠与甲铁城 Time Limit: 1500/800MS (Java/Others) ...
- kafka--producer配置解析
producer解析 主要是解析一下producer的相关配置以及一些使用场景 相关解析 名称 说明 类型 默认值 有效值 重要性 bootstrap.servers 用于建立与kafka集群连接 ...
- Spring 配置log4j和简单介绍Log4J的使用
Log4j 是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事 件记录器.UNIX Syslog守护进程等 ...
- SQL SERVER 索引中聚集索引分析和Transact-SQL语句优化
一. 聚集索引B树分析1.聚集索引按B树结构进行组织的,索引B树种的每一页称为一个索引节点.B树的顶端节点称为根节点. 索引中的低层节点称为叶节点.根节点与叶节点之间的任何索引级别统称为中间级.在聚 ...
- D3学习之动画和变换
D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...
- poj 3253超时
哈夫曼树超时是因为每次都需要重排,十分浪费时间,即使是快排.