AngularJs作用域 $scope

作用于($scope)是构成AngularJs应用的核心基础,在整个框架中都被广泛应用。

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达执行的上下文,$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

作用域是视图和控制器之间的胶水,在应用将视图渲染并呈现给用户之前,在视图的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AnguarJs,这个功能让XHR请求等promise对象的实现变得非常容易。

作用域提供了监视数据模型变化的能力。它允许开发者使用其中的 apply 机制,将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式,同时它也是将事件通知给另一个控制器和应用其他部分的中介。

将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构。

1、视图和 $scope 的世界

AngularJS启动并生成视图时,会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。

$rootScope 是AngularJS中最接近全局作用域的对象。所以不要再在 $rootScope上附加过多的业务逻辑 ,这与污染JavaScript的全局作用域是一样的。

$scope 对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

$scope 对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope 并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

$scope 的所有属性,都可以自动被视图访问到,如下的HTML:

<div ng-app="myApp">
	<h1>Hello {{ name }}</h1>
</div>

如果希望 {{ name }} 变量是本地 $scope 的一个属性:

angular.module('myApp', [])
.run(function($rootScope) {
	$rootScope.name = "World";
});

2、就是 HTML 而已

我们的应用负责渲染HTML并将它交给浏览器来显示。这个HTML中包含了各种标准的HTML元素,包括AngularJS特有的以及非AngularJS特有的元素。AngularJS不会对不包含AngularJS特殊声明的元素进行任何处理。

<h2>Hello world</h2>
<h3>Hello {{ name }}</h3>

上面这个例子中,AngularJS不会处理 <h2> 元素,但是会在作用域发生变化时更新 <h3> 元素。

我们可以在AngularJS应用的模板中使用多种标记,包括下面这些。

 指令:将DOM元素增强为可复用的DOM组件的属性或元素。
 值绑定:模板语法 {{ }} 可以将表达式绑定到视图上。
 过滤器:可以在视图中使用的函数,用来进行格式化。
 表单控件:用来检验用户输入的控件

3、作用域能做什么

作用域有以下的基本功能:

 提供观察者以监视数据模型的变化;
 可以将数据模型的变化通知给整个应用,甚至是系统外的组件;
 可以进行嵌套,隔离业务功能和数据;
 给表达式提供运算时所需的执行环境。

开发AngularJS应用的大部分工作内容,就是构建作用域及其相关的功能。

ps:作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成视图模型(view model)

4、$scope 的生命周期

当Angular关心的事件发生在浏览器中时,比如用户在通过 ng-model 属性监控的输入字段中输入,或者带有 ng-click 属性的按钮被点击时,Angular的事件循环都会启动。这个事件将在Angular执行上下文中处理。

每当事件被处理时, $scope 就会对定义的表达式求值。此时事件循环会启动,并且Angular应用会监控应用程序内的所有对象,脏值检测循环也会运行。

$scope 对象的生命周期处理有四个不同阶段:

4.1、创建

在创建控制器或指令时,AngularJS会用 $injector 创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。

var app = angular.module('myApp',[]);
	app.controller('xxController',['$scope',function($scope){
		//$socpe doing something
	}])
4.2、链接

当Angular开始运行时,所有的 $scope 对象都会附加或者链接到视图中。所有创建 $scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的 - 函数。

这些函数被称为 $watch 函数,Angular通过这些函数获知何时启动事件循环。

4.3、更新

当事件循环运行时,它通常执行在顶层的$scope对象上(上文提到的$rootScope),每个子作用域都会执行自己的脏值检测,每个监控函数都会执行变化,如果检测到任意变化,$scope对象就会触发指定的回调函数。

4.4、销毁

当一个$scope在视图中不再被需要时,这个作用域将会自动清理和销毁自己。

尽管永远不会需要清理作用域(AngularJs会为你清理),但是知道是谁创建了作用域还是有用的,因为可以使用$scope上叫做$destroy()的方法清理这个作用域。

发布了23 篇原创文章 · 获赞 10 · 访问量 410

猜你喜欢

转载自blog.csdn.net/qq_35593965/article/details/103273946