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的更多相关文章

  1. AngularJs学习笔记--Scope

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...

  2. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  3. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  4. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  5. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  8. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. HDU 2567 寻梦(字符串,插入)

    #include<iostream> #include<stdio.h> #include<string.h> #include<cmath> usin ...

  2. MySQL逻辑架构简介

    1.Connectors指的是不同语言中与SQL的交互2 Management Serveices & Utilities: 系统管理和控制工具3 Connection Pool: 连接池管理 ...

  3. RPD Volume 168 Issue 4 March 2016 评论1

    GEANT4 calculations of neutron dose in radiation protection using a homogeneous phantom and a Chines ...

  4. Java里的浅复制与深复制

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不 复制它所引用的对象. ...

  5. 【母函数】hdu2082 找单词

    普通型母函数详解见这里:http://www.wutianqi.com/?p=596 裸题,存个板子. #include<cstdio> #include<cstring> u ...

  6. Dom4jDemo应用-保存手机信息

    ---恢复内容开始--- import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStr ...

  7. CSS box-flex属性,然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  8. HttpClient 处理中文乱码

    HttpClient 请求的中文乱码问题 相关类库: commons-codec-1.3.jar,commons-httpclient-3.1.jar,commons-logging-1.1.1.ja ...

  9. 浅谈Uber与滴滴快的提供差异化服务带来的商业模式思考

    一.引言 滴滴和快的烧钱的时代已经过去,在那个时代我们消费者着实得到了不少实惠.自从他们温柔的在一起之后,这种实惠就木有了.让我不禁感叹坐车的几率有降低了50%.前段时间,Uber悄无声息的进入我的视 ...

  10. Jquery的Split二次分割

    <script type="text/javascript">var str="Q1#k1:Q2#k2"var str2=str.split(':' ...