Angular作用域的层级概念(scope)
首先引入 angular 的根作用域：$rootScope
ng-app:定义了angualr的作用域
ng-controller:定义了控制器
$scope定义了视图与控制器之间的纽带，而scope本身是垂直继承的，当子作用域没有定义，便会找父作用域，逐层往上找直到根作用域 $rootScope.
没有定义控制器的元素对应的即是根作用域，如下（<div>{{msg}}</div>）
看下面代码，当我们点击parent控制器时，发现其子控制器内容会跟着变化，而父控制器以及根作用域绑定的元素内容没有变化（msg默认在各作用域都没有定义，因此继承根作用域的msg="Hello KiTy"）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
</head>
<body ng-app = "myApp">
<div>{{msg}}</div>
<div ng-controller="parent" ng-click="change()">{{msg}}
<div ng-controller="child">{{msg}}</div>
<div ng-controller="child1" ng-click="change1()">{{msg}}</div>
<div ng-controller="child2">{{msg}}</div>
</div>
<script src="angular.js"></script>
<script> var app = angular.module('myApp', []);
app.run(function($rootScope){ //run方法根作用域$rootScope的方法,因其没有控制器,不能用controller方法
var msg = "Hello KiTy"
$rootScope.msg = msg;
})
app.controller("parent", function($scope){
$scope.change = function(){
$scope.msg = "lol";
}
})
app.controller("child", function($scope){ })
app.controller("child1", function($scope){ })
app.controller("child2", function($scope){ })
</script>
</body>
</html>
由上不难发现scope是垂直继承，且是单向由上当下的，即父作用域不会继承子作用域数据绑定的值
若想通过子作用域传递其数据到父作用域可以在子控制器函数中加以下代码：
方法一：
app.controller("parent", function($scope，$rootScope){
console.log($scope)
$scope.change = function(){
$rootScope.msg = "lol";
}
})
方法二：
app.controller("parent", function($scope){
console.log($scope)
$scope.change = function(){
$scope.$parent.msg = "lol";
}
})
那么找个$parent怎么来的？答案：console.log($scope)；控制台输出$scope后找到的，意为其父作用域
当然了我们还发现了兄弟作用域$$prevSibling、$$nextSibling,可以通过这两项来改变兄弟作用域内数据，意为前一个兄弟、后一个兄弟
代码：
app.controller("child1", function($scope){
console.log($scope);
$scope.change1 = function(){
$scope.$$prevSibling.msg = "lol";
$scope.$$nextSibling.msg = "lol";
}
})
通过以上分析我们发现作用域层级关系就像DOM树型机构，一 一对应，有根作用域 $rootScope,子作用域 $scope ,每一个子作用域有其兄弟作用域
可通过 $parent; $$prevsibling; $$nextSibling 向其父作用域以及兄弟作用域传递数据。（若子作用域默认有数据绑定，则不会受其他作用域影响）
Angular作用域的层级概念(scope)的更多相关文章
- angular源码分析：angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- angular controller as syntax vs scope
今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我 ...
- 从零开始讲解JavaScript中作用域链的概念及用途
从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...
- Angular——作用域
基本介绍 应用App是无法嵌套的,但是controller是可以嵌套的,每个controller都会对应一个模型(model)也就是$scope对象,不同层级的controller下的$scope遍产 ...
- angular作用域分析
angualr作用域 Scope 控制器作用域的继承特性Ⅰ 绑定的数据是变量 单向隔离(兄弟之间互不影响,父子之间单向继承) 父级控制器的数据绑定会影响到子级控制器 前提是子控制器内没有绑定数据 单向 ...
- Python基础－作用域和命名空间（Scope and Namespace）
在Python中,对象是独立的,不同作用域中的不同名字都可以被绑定在同一个对象上,当然对这个对象的修改会影响所有的引用.赋值操作就是名字和对象的绑定或重绑定.这和C++中的引用是一样的. 1,基础概念 ...
- angular学习（三）-- $scope
1.3 视图数据模型:$scope $scope 是用来视图和数据之间的胶水.粘合剂 视图和控制器之间的数据桥梁 用于在视图和控制器之间传递数据 用来暴露数据模型(数据.行为) 监视模型数据的变化,做 ...
- angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...
- 2 Angular 2 的核心概念
一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...
随机推荐
- linux数据误删后，灾难性数据备份与数据还原
一 准备工作 #rm –rf 误删重要数据怎么办? 1. 要冷静,通知停止该服务器一切操作 2. 查看被删除文件所在分区 #mount 3. 将该分区设置为只读 #mount -r -n -o re ...
- PacificA中的租约与失效检测解读
PacificA是微软的在基于log的分布式存储系统中的复制技术. 由于配置管理器维护着当前配置的真实情况,因此主节点不必保持不变. 这是因为配置的本地视图在不同服务器上是不必同步的. 特别是,我们必 ...
- Oracle物理体系结构
一.ORACLE 物理体系结构 原理结构图 各部分解释: PGA: 私有内存区,仅供当前发起用户使用. 三个作用 用户登录后的session信息会保存在PGA. 执行排序,如果内存不够,oracle会 ...
- android 关闭/开启软件键盘（hideSoftKeyboard）
/** * 隐藏软键盘 * @param v */ public static void hideSoftKeyboard(View v) { InputMethodManager imm = (In ...
- Si2155
http://www.edom.com.tw/cn/index.jsp?m=prodview&id=1702 Description:新型的Si2155 电视调谐器IC扩展了Silicon L ...
- ASP.NET SignalR
何为ASP.NET SignalR,有什么用 ASP.NET SignalR是一个ASP.NET库,是为了实现实时web通信而创造的,能让服务器与客户端实现即时通信,而不需要服务器等待接收到客户端请求 ...
- 使用本地JConsole监控远程JVM(最权威的总结)
问题背景 Tomcat经常崩溃crash,想看看JVM内存使用情况,就想到了用Jconsole监控,以前只是监控本地的JVM,这次要监控远程的,遇到了不少问题. 经过几个小时的努力,参考了众多 ...
- mysql高可用架构之mysql-mmm配置详解
实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验说明:本实验共有5台主机,IP分配如拓扑 实验软件:mariadb-10.0.20 mysql-mmm-2.2 ...
- 测试环境搭建心得 vs2008+SQL2008 PHP+APACHE+mysql Team Foundation Server2013
大四即将结束,大学的最后一个假期,找到一份实习工作,担任测试工程师.在过年前的最后一周入职,干了一周的活儿.主要工作就是搭建测试环境. VMware 主要熟悉VMware软件,装系统基本都没什么问题. ...
- 用最简单的方式在C#中使用多线程加速耗时的图像处理算法的执行（多核机器）。
图像处理中,有很多算法由于其内在的复杂性是天然的耗时大户,加之图像本身蕴涵的数据量比一般的对象就大,因此,针对这类算法,执行速度的提在很大程度上依赖于硬件的性能,现在流行的CPU都是至少2核的,稍微好 ...