AngularJS 深入理解 $scope

$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() 函数手动清理.

时间: 2024-10-05 04:43:13

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

angularjs基本理解

介绍一点angularjs的基础入门知识点! 1.viewModel:是一个用来提供特别数据和方法从而维护view的对象,viewModel是$scope的对象,只存在于angularjs中,$scope是一个简单的js对象. 2.model:是应用中的简单数据,一般是简单的js对象. 3.controller:负责初始化状态和参数化$scope方法用以控制行为.但是$scope并不保存状态也不和远程服务互动. 4.view :view是Angularjs解析后渲染和绑定后生成的HTML: ps

AngularJS 深入理解 $scope 转载▼

AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $sco

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

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include 假设在我们的 controller 中, $scope.myPrimitive = 50; $scope.myObject = {aNumber: 11}; HTML 为: <script type="text/ng-template" id="/tpl1.html&quo

Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题

Angularjs MVC 以及 $scope 作用域 Angularjs 模块的 run 方法 以及依赖注入中代码压缩问题 1. Angularjs MVCModel:数据模型层View:视图层,负责展示Controller:业务逻辑和控制逻辑优点: 代码模块化 代码逻辑比较清晰.可移值性高,后期维护方便.代码复用,代码规模越来越大的时候,切分职责是大势所趋缺点:运行效率稍微低一些2. Angularjs $scope 作用域1. $scope 多控制器单独作用域<!DOCTYPE html>

Angularjs: call other scope which in iframe

Angularjs: call other scope which in iframe ------------------------------------------------------------------------------------------------------------ To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they ar

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

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

angularjs培训之Scope嵌套

每部分的angularjs应用都有一个父scope(但是ng-app对应的是$rootScope,这个scope是终极scope),除了isolate scope,所有的scope都是通过原型继承来创建,也就是说可以访问它的父的scope.如果你对OOP比较熟悉,这种行为你看起来就比较熟悉了. 每次html渲染属性和方法是,会从当前的scope中寻找,如果没有找到,就从他的父scope中寻找,直到检索到$rootScope中,如果还没有找到就会报错. 下面看个例子: <DIV ng-contro

AngularJS的作用域Scope

1.简介 angularjs启动并生成视图时,会根据ng-app元素和$RootScope进行绑定.$RootScope是所有$scope对象的最上层,是angularjs中最接近于全局作用域的对象. $scope对象就是一个普通的javascript对象,在angularjs中充当数据模型,但与传统的数据模型又不一样,$scope并不负责处理和数据操作,它只是视图和HTML之间的桥梁. $scope的所有属性都可以自动被视图访问到. 作用域是构成AngularJS应用的核心,它与应用的数据模型

AngularJS 指令的 Scope (作用域)

指令被创建AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false,在这种情况下,在指令模板中可以直接使用父作用域中的变量,创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中. 2.scope = true,当把scope属性设置为true时,这表明我们创建的指令要创建一个新的作用域,这个作用域继承自我们的父作用域,它和父作用域不是

JavaScript调用AngularJS的函数/$scope/变量

使用背景: 需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controller来获取app var appElement = document.querySelector('[ng-controller=mainController]'); 然后在获取$scope变量: var $scope = angular.element(appElement).scop