$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.

有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope中.

$rootScope

AngularJS 应用启动并生成视图时,会将根 ng-app 元素与 $rootScope 进行绑定.$rootScope 是所有$scope 的最上层对象,可以理解为一个 AngularJS 应用中得全局作用域对象,所以为它附加太多逻辑或者变量并不是一个好主意,和污染 Javascript 全局作用域是一样的.

$scope 的作用

$scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和Controller 之间可以友好的通讯.

再进一步系统的划分它的作用和功能:

1.提供了观察者可以监听数据模型的变化

2.可以将数据模型的变化通知给整个 App

3.可以进行嵌套,隔离业务功能和数据

4.给表达式提供上下文执行环境

在 Javascript 中创建一个新的执行上下文,实际就是用函数创建了一个新的本地上下文,在 AngularJS 中当为子 DOM 元素创建新的作用域时,其实就是为子 DOM 元素创建了一个新的执行上下文.

$scope 生命周期

AngularJS 中也有一个'事件'的概念,比如当一个绑定了 ng-model 的 input 值发生变化时,或者一个 ng-click 的 button 被点击时,AngularJS 的事件循环就会启动.事件循环是 AngularJS 中非常非常核心的一个概念,因为不是本文主旨所以不多说,感兴趣的可以自己看看资料.这里事件就在 AngularJS 执行上下文中处理,$scope就会对定义的表达式求值.此时事件循环被启动, AngularJS 会监控应用程序内所有对象,脏值检查循环也会启动.

$scope 的生命周期有4个阶段:

1. 创建

控制器或者指令创建时, AngularJS 会使用 $injector 创建一个新的作用域,然后在控制器或指令运行时,将作用域传递进去.

2. 链接

AngularJS 启动后会将所有 $scope 对象附加或者说链接到视图上,所有创建 $scope 对象的函数也会被附加到视图上.这些作用域将会注册当 AngularJS 上下文发生变化时需要运行的函数.也就是 $watch 函数, AngularJS通过这些函数或者何时开始事件循环.

3. 更新

一旦事件循环开始运行,就会开始执行自己的脏值检测.一旦检测到变化,就会触发 $scope 上指定的回调函数

4. 销毁

通常来讲如果一个 $scope 在视图中不再需要, AngularJS 会自己清理它.当然也可以通过 $destroy() 函数手动清理.

AngularJS 深入理解 $scope的更多相关文章

  1. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  2. AngularJS 作用域(Scope)

    AngularJS作用域(Scope) Scope作用域是应用在视图和控制器之间的纽带,Scope是一个对象包含可用的方法和属性,Scope可以应用在试图和控制器上. $scope是针对当前的cont ...

  3. angularjs 中的scope继承关系——(2)

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...

  4. AngularJs学习笔记--Scope

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

  5. Angularjs: call other scope which in iframe

    Angularjs: call other scope which in iframe -------------------------------------------------------- ...

  6. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  7. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  8. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  9. 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

    学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...

随机推荐

  1. 解释器模式(Interpreter Pattern)

    定义:给定一种语言,定义他的文法的一种表示,并定义一个解释器,该解释器使用该表示来解释语言中句子. 抽象解释器:声明一个所有具体表达式都要实现的抽象接口(或者抽象类),接口中主要是一个interpre ...

  2. C# 下载搜狗词库

    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); string[] userAgent = new string[]{& ...

  3. PHP PDO的错误处理模式

    PDO默认的错误处理方式是返回一个数组格式的错误代码.如果想要判断SQL有没有出错时,就需要写一组代码来检测这个返回的数组.觉得这样有些麻烦.还好PDO还提供了另外两种处理方式,只要根据需要设置一下就 ...

  4. 四种方式实现SQLServer 分页查询

    SQLServer 的数据分页: 假设现在有这样的一张表:CREATE TABLE test( id int primary key not null identity, names varchar( ...

  5. 虚幻4外包团队-推荐非常全面的的Unreal教程

    <Unreal SDK 游戏开发从入门到精通(UnrealScript语法.UI Scene界面.UDK独立开发游戏)> 课程讲师:Shark  课程分类:.net 适合人群:初级 课时数 ...

  6. HackerRank "Jumping on the Clouds"

    DP or Greedy - they are all in O(n) In editorial, a beautiful Greedy solution is given: "To rea ...

  7. 山东省选 郁闷的小J

    小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的危险,这也正是他所郁闷的. 具体说来,书架由 ...

  8. union和union all的区别

    UNION 写一篇联合查询(把前后两个表的查询结果集合在前表中)首先有个为什么需要 相同记录数?? 记错了.应该是union两张表的查询字段数目要一致,字段类型要相似相同的数据类型,至少是相似,可转化 ...

  9. [转载]VIM 教程:Learn Vim Progressively

    文章来源:http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/   Learn Vim Progressively   TL ...

  10. SparkConf加载与SparkContext创建(源码阅读四)

    sparkContext创建还没完呢,紧接着前两天,我们继续探索..作死... 紧接着前几天我们继续SparkContext的创建: 接下来从这里我们可以看到,spark开始加载hadoop的配置信息 ...