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>
效果图：
|