AngularJS(三)——作用域

前端之家收集整理的这篇文章主要介绍了AngularJS(三)——作用域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

作用域是视图和控制器之间的胶水

作用域是应用状态的基础。 基于动态绑定,我们可以依赖视图在修改数据时立刻更新 $scope ,也可以依赖$scope 在其发生变化时立刻重新渲染视图

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

一、视图与$scope的世界

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

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

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

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

<divng-app="myApp">

<h1>Hello {{ name }}</h1>

</div>

我们希望 {{ name }} 变量是本地 $scope 的一个属性

angular.module('myApp',[])

.run(function($rootScope) {

$rootScope.name ="World";

});

二、就是html

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

<h2>Hello world</h2>

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

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

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

1、 指令:将DOM元素增强为可复用的DOM组件的属性或元素。

2、 值绑定:模板语法 {{ }} 可以将表达式绑定到视图上。

3、过滤器:可以在视图中使用的函数,用来进行格式化。

4、 表单控件:用来检验用户输入的控件。

三、作用域作用

作用域有以下的基本功能

1、 提供观察者以监视数据模型的变化;

2、可以将数据模型的变化通知给整个应用,甚至是系统外的组件;

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

我们可以不将变量设置在 $rootScope 上,而是用控制器显式创建一个隔离的子 $scope 对象,把它设置到这个子对象上。使用 ng-controller 指令可以将一个控制器对象附加到DOM元素上,

如下所示:

<div ng-app="myApp">

<div ng-controller="MyController">

<h1>Hello {{name }}</h1>

</div>

</div>

ng-controller 指令为这个DOM元素创建了一个新的 $scope 对象,并将它嵌套在 $rootScope 中。给表达式提供运算时所需的执行环境。作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成视图模型(view model)。

四、作用域层级

每一个AngularJS应用都有一个绝对的根作用域。但是可能有多个子作用域。

当AngularJS执行表达式 {{username}} ,它会首先查找和当前节点相关的作用域中叫做username的属性。如果没找到,那就会继续向上层作用域搜索,直到根作用域。在Javascript中,这被称为原型类型的继承,子作用域以原型的形式继承自父作用域。

举例:

index.html:

<span style="font-size:18px;"><!doctype html>
<html ng-app>
<head>
	<script src="js/angular-1.3.0.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<div ng-controller="EmployeeController">
		Manager: {{employee.name}} [ {{department}} ]<br>
		Reports:
		<ul>
			<li ng-repeat="employee in employee.reports">
				{{employee.name}} [ {{department}} ]
			</li>
		</ul>
		<hr>
		{{greeting}}
	</div>
</body>
</html></span>

script.js:

<span style="font-size:18px;">function EmployeeController($scope) {
	$scope.department = 'Engineering';
	$scope.employee = {
		name: 'Joe the Manager',reports: [
			{name: 'John Smith'},{name: 'Mary Run'}
		]
	};
}</span>

效果图:


五、$scope的生命周期

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

1)创建

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

2)链接

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

3)更新

每个作用域都有监控函数,监控函数都会检查变化,如果检测都变化,$scope对象就会触发指定的回调函数,来更新视图。

4)销毁

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

指令和作用域

在编译阶段,编译器在DOM中匹配指令。指令通常分为两种:
观察型的指令,例如双花括号表达式 {{expression}} ,会用$watch来注册一个监听者。无论表达式什 么时候改变,这类型的指令都会被通知,并且能更新视图。
监听者型的指令,比如 ng-click ,会向DOM注册一个监听者。当DOM监听者触发,指令会执行相关 的表达式并且使用$apply方法更新视图。

六、作用域特点

1、作用域提供APIs($watch)来观察模型的变化。

2、作用域提供APIs($apply)将任何模型的改变从"AngularJS领域(Angularrealm)"通过系统映射到视图上。

3、作用域能通过共享模型成员的方式嵌套到应用组件上。一个作用域从父作用域继承属性

4、作用域提供表达式执行的上下文。比如说表达式 {{username}} 本身是无意义的,除非把它放到指定username属性的作用域中。

总结

让我们在实践应用中来体会它的魅力吧!
原文链接:https://www.f2er.com/angularjs/149575.html

猜你在找的Angularjs相关文章