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 ...
随机推荐
- 初识JS 基本语法.基本运算符
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...
- Nhibernate工具Profiler配置
1.使用之前需要确认Framework的Version,如果是4.0那么使用如下程序集需要在 创建ISessionFactory的项目中引用NHProfiler安装目录下的 HibernatingRh ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- react className 样式控制
1.<div className={ "formbox " + this.state.classArr }></div> 2. this.state.cla ...
- Python面试题之Python和Java中Super方法的区别
python 的 super 是一个函数,需要两个参数,第一个参数是类,第二个参数是实例,返回值是一个类对象. 其意义是:站在参数2这个实例的角度看去, 参数1这个类的‘父亲’是谁,把‘父亲’返回. ...
- 【WIN7】windows\system32 下的几乎所有文件的简单说明【2】
1: System32的详解 C:\WINDOWS\system32... 2: 3: 这个 system32 文件夹中包含了大量的用于 Windows 的文件. 这里主要用于存储 DLL 文件, ...
- Python引用多个模块，调用模块中的函数时，要注意的地方
转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...
- idea软件编码已经设置好了为utf-8，但是svn中down下来的文件格式本身不是utf-8的，此时打开后会出现中文乱码解决方法
我是个idea的忠实用户,新公司的项目都是用eclipse做的,通过svn拉下代码后发现,注释的内容里,中文内容都是乱码.问过项目负责人,说可能是GBK编码. 但是,我通过idea的setting设置 ...
- [TJOI2010]打扫房间
题目描述 学校新建了一批宿舍,值日生小A要把所有的空房间都打扫一遍.这些宿舍的布局很奇怪,整个建筑物里所有的房间组成一个N * M的矩阵,每个房间的东南西北四面墙上都有一个门通向隔壁房间.另外有些房间 ...
- Effective C++ 条款01：视C++为一个语言联邦
四个次语言 C Object-Oriented C++ Template C++ STL