Angularjs学习笔记5_scope和$rootScope
$rootScope
$rootScope 是最顶级的scope,它对应着含有 ng-app 指令属性的那个DOM元素。
app.run(function($rootScope) {
$rootScope.name = "Ari Lerner"; $rootScope.test = new Date();
});
app.run函数看作是Angular应用的main方法。
可以在view的任何地方访问这个name属性,使用模版表达式{{}},像这样 {{ name }}
Angular 应用启动并生成视图时,会将根 ng-app 元素与 $rootScope 进行绑定.$rootScope 是所有 $scope 的最上层对象,可以理解为一个 Angular 应用中得全局作用域对象, 所以为它附加太多逻辑或者变量并不是一个好主意,和污染 Javascript 全局作用域是一样的. 偶尔有一些数据希望全局应用在整个 app 中,可以将数据注入 $rootScope。因为其他 scope 都会继承 root scope,那些注入的数据对于 ng-show 这类 directive 都是可用的,就像是在本地 $scope 中的变量一样。当然,必须很小心地使用 $rootScope。特别是不要用于代码,而仅仅用于注入数据。如果非常希望在 $rootScope 写一个函数,那最好把它写到 service 里,这样只有用到的时候它才会被注入,测试起来也方便些。相反,
如果一个函数的功能仅仅是存储和返回一些数据,就不要把它创建成一个 service。
app.controller('myCtrl', function($scope, $rootScope) {$scope.change = function() {
$scope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
})
app.controller('myCtrl2', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.changeRs = function() {
$rootScope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
}); // 控制器之间共享数据,最好用 service
Scope的特性
- Scope提供$watch方法监视Model的变化。
- Scope提供$apply方法传播Model的变化。
- Scope可以继承,用来隔离不同的 application components和属性访问权限。
- Scope为Expressions的计算提供上下文。
$scope 的作用
$scope 对象在 Angular 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯.它的作用和功能:
提供了观察者可以监听数据模型的变化
可以将数据模型的变化通知给整个 App
可以进行嵌套,隔离业务功能和数据
给表达式提供上下文执行环境
执行上下文:
在 Javascript 中创建一个新的执行上下文,实际就是用函数创建了一个新的本地上下文,在 Angular 中当为子 DOM 元素创建新的作用域时,其实就是为子 DOM 元素创建了一个新的执行上下文.
$scope 生命周期
事件循环:Angular 的'事件'的概念,当一个绑定了 ng-model 的 input 值发生变化时,或者一个 ng-click 的 button 被点击时,Angular 的事件循环就会启动.
事件就在 Angular 执行上下文中处理,$scope 就会对定义的表达式求值.此时事件循环被启动, Angular 会监控应用程序内所有对象,脏值检查循环也会启动.
4个阶段:
1. 创建
控制器或者指令创建时, Angular 会使用 $injector 创建一个新的作用域,然后在控制器或指令运行时,将作用域传递进去.
2. 链接
Angular 启动后会将所有 $scope 对象附加或者说链接到视图上,所有创建 $scope 对象的函数也会被附加到视图上.这些作用域将会注册,
当 Angular 上下文发生变化时需要运行的函数.也就是 $watch 函数, Angular 通过这些函数或者何时开始事件循环.
3. 更新
一旦事件循环开始运行,就会开始执行自己的脏值检测.一旦检测到变化,就会触发 $scope 上指定的回调函数
4. 销毁
通常来讲如果一个 $scope 在视图中不再需要, Angular 会自己清理它.当然也可以通过 $destroy() 函数手动清理.
创建一个$scope 对象
给DOM元素安上一个controller对象,使用ng-controller 指令属性:
<div ng-controller="MyController">
{{ person.name }}
</div>
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象
原型继承:
所有scope都遵循原型继承(prototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上。
唯一的例外:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们。
Angularjs学习笔记5_scope和$rootScope的更多相关文章
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- 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学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
- AngularJs学习笔记--Scope
原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...
- AngularJs学习笔记--Understanding the Controller Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...
- 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学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
随机推荐
- visual studio运行时库MT、MTd、MD、MDd的研究
在开发window程序是经常会遇到编译好好的程序拿到另一台机器上面无法运行的情况,这一般是由于另一台机器上面没有安装响应的运行时库导致的,那么这个与编译选项MT.MTd.MD.MDd有什么关系呢?这是 ...
- maven project创建填充项
GroupID是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构. ArtifactID就是项目的唯一的标识符,实际对应项目的名称,就是项目根目录的名称. 一般Gr ...
- XML制作RSS源
什么是RSS源?看到这片文章的人相信都知道.自己博客首页不就是一个吗? 好吧,先来一个简单点的.直接就是死代码:详细如何使用就看RSS使用标准吧! <?xml version = "1 ...
- 【onethink1.0】HTML模板获取前台和后台当前登录用户名
1.版本:onethink1.0:位置:HTML模板 前台:{:get_username()} 后台:{:session('user_auth.username')}
- linux下如何查看多核负载情况【转】
最近服务器负载超荷,CPU的单个荷使用率到了百分之八九十,内存占用超大,让给检测性能,不给源码,只给一个+ -g编译生成的执行文件,Fuck!!! 1, 在linux下载了valgrind,使用val ...
- session会话保持原理
1. 什么是会话保持? 会话保持是负载均衡最常见的问题之一,也是一个相对比较复杂的问题.会话保持有时候又叫做粘滞会话(Sticky Sessions).会话保持是指在负载均衡器上的一种机制,可以识别客 ...
- windbg dds、dps、dqs
dds.dps和dqs命令显示给定范围内存的内容,它们是把内存区域转储出来,并把内存中每个元素都视为一个符号对其进行解析,dds是四字节视为一个符号,dqs是每8字节视为一个符号,dps是根据当前处理 ...
- Installation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED
一般为AndroidManifest.xml中的activity的问题 这次主要是因为activity在另外一个package里面,但是package名称第一次字母是大写,所以出错 把package名 ...
- HDU - 4511 小明系列故事――女友的考验(AC自己主动机+DP)
Description 最终放寒假了,小明要和女朋友一起去看电影.这天,女朋友想给小明一个考验,在小明正准备出发的时候.女朋友告诉他.她在电影院等他,小明过来的路线必须满足给定的规则: 1.如果小明 ...
- 一段js代码
原文地址 [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math ...