AngularJs学习笔记(3)——scope
AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。
$rootScope是所有$scope对象的最上层,是AngularJS中最接近全局作用域的对象 。
一个ng-app可以有多个controller,$scope的范围局限于每一个controller中
$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性
作用域提供了监视数据模型变化的能力 ,$scope的所有属性,都可以自动被视图访问到
作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,
也可以依赖$scope在其发生变化时立刻重新渲染视图
$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope并不负责处
理和操作数据,它只是 HTML (视图) 和 JavaScript (控制器)之间的纽带
指令在AngularJS中被广泛使用,指令通常不会创建自己的$scope,但也有例外。比如
ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上
作用域可以嵌套
scope的嵌套是通过controller的嵌套实现的
除了孤立作用域(指令内部创建的作用域)外,所有的作用域都通过原型继承而来,也就是说它们都可以访问父级作用域
默认情况下, AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找
示例:
1.创建两个controller
app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
2.controller嵌套
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
我们应该始终用ngModel来绑定$scope上一个数据模型内的属性,而不是$scope上的属性,
这可以避免在作用域或后代作用域中发生属性覆盖
AngularJs学习笔记(3)——scope的更多相关文章
- AngularJs学习笔记--Scope
原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- HDU 1236 排名(结构体+排序)
今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完成的题数排序,没有考虑 每题的分值,所以并不是最后的排名.给定录取分数线,请你写程序找出最后通过分数线的 考生,并将他们的成绩按降序打 ...
- zoj3988
zoj3988 题意 如果一个集合 \(\{i,j\}\) 满足 \(i\neq j\) 且 \(a[i]+a[j]\) 是素数,则称之为素数集合. 给出一些数字,这些数字可以组成多种素数集合,从这些 ...
- Codeforces #426 Div2 D(线段树优化 DP )
#426 Div2 D 题意 给出 \(n\) 个数字,将这些数字隔成 \(k\) 个部分(相对位置不变),统计每个部分有几个不同数字,然后全部加起来求和,问和最大是多少. 分析 很容易想到 \(DP ...
- shell 查看 具体某行的值
sed: sed '5!d' file awk: awk 'NR==5' file
- [BZOJ 2208] 连通数
Link: BZOJ 2208 连通数 Solution: 传递闭包模板题 传递闭包是集合中最小的二元关系,其实就是对二元关系的不断拓展,一般用$floyd$求解 这里要先跑一遍$tarjan$求出$ ...
- 【块状链表】AutSky_JadeK的块状链表模板+总结(STL版)
Part 1.块状链表. 定位 插入 删除 数组 O(1) O(n) O(n) 链表 O(n) O(1) O(1) 对于线性表的以上常见操作来说,数组和链表都无法有效地解决.但是,若我们将链表的每 ...
- DataSnap Session expired处理。
测试环境:RAD 10.2.3 建立DataSet Server服务端连接oracle数据库. 1.客户端用FDConnection连接服务端,协议为TCP/IP时,当服务端重启,不用再重启客户端. ...
- Java堆内存不足
1)使用IDEA开发程序时有时候会提示“Java Heap space error”,说明IDEA默认配置的Java堆内存不足,程序需要更多的堆内存. 2)堆(Heap)和非堆(Non-heap)内存 ...
- angualrjs2教程
1.一本本开源的Angular2书籍:https://zhangchen915.gitbooks.io/angular2-training/ 2.好的博客教程,讲的通俗易懂:http://codin. ...
- 【FTP】org.apache.commons.net.ftp.FTPClient实现复杂的上传下载,操作目录,处理编码
和上一份简单 上传下载一样 来,任何的方法不懂的,http://commons.apache.org/proper/commons-net/apidocs/org/apache/commons/net ...