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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- centos6.5 中文输入法图标和提示都不见了【解决】
原因python升级引起的 两步解决: # vi /usr/bin/ibus-setup # vi /usr/libexec/ibus-ui-gtk 把这两个文件中的exec python 修改为 e ...
- C#异步编程模式IAsyncResult
IAsyncResult 异步设计模式通过名为 BeginOperationName 和 EndOperationName 的两个方法来实现原同步方法的异步调用,如 FileStream 类提供了 B ...
- POJ 3264 Balanced Lineup 【线段树/区间最值差】
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 62103 Accepted: 29005 Cas ...
- 自定义编写jmeter的Java测试代码
我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如LoadRunner就有很多自定义脚本的协议,比如"C Vuser","JavaV ...
- java中为什么要用多线程
我们可以在计算机上运行各种计算机软件程序.每一个运行的程序可能包括多个独立运行的线程(Thread).线程(Thread)是一份独立运行的程序,有自己专用的运行栈.线程有可能和其他线程共享一些资源,比 ...
- 《深入理解Spark-核心思想与源码分析》(二)第二章Spark设计理念和基本架构
若夫乘天地之正,而御六气之辩解,以游无穷者,彼且恶乎待哉? ——<庄子.逍遥游> 翻译:至于遵循宇宙万物的规律,把握“六气”的变化,遨游于无穷无尽的境域,他还仰赖什么呢! 2.1 初始Sp ...
- ThinkPHP模板中JS等带花括号处会被解析错误的解决办法
如下图,当本人在ThinkPHP框架的模板中写jQuery代码的时候,写了一些注释,并且注重是斜线和换括号{是连着一起的,这层语法上来时是没问题的,但是在ThinkPHP 的模板引擎解析下,会被解析掉 ...
- hibernate CascadeType属性
CascadeType.PERSIST 只有A类新增时,会级联B对象新增.若B对象在数据库存(跟新)在则抛异常(让B变为持久态) : 级联保存,当调用了Persist() 方法,会级联保存相应的数据 ...
- nginx+ssl+Portus+registry docker仓库
还存在的问题,如果通过nginx 转发推过去的镜像,在web页面显示比较慢,需要等定时任务发现了才能及时显示出来,如果通过b.p.xxx.cn:5000加端口push 的镜像就比较快显示出来.只影响到 ...
- python3读取html文件
# htmlf=open('E:\\test2.html','r',encoding="utf-8") # htmlcont=htmlf.read() # print(type(h ...