AngularJS作用域
发布时间：2020-12-17 10:27:49 所属栏目：安全 来源：网络整理
导读：作用域： 应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。 $scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连
|
作用域：
应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。 $scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对 DOM 进行设置以便将属性变化通知给 AngularJS 。 作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新 $scope ，也可以依赖 $scope 在其发生变化时立刻重新渲染视图。 AngularJS 将 $scope 设计成和 DOM 类似的结构，因此 $scope 可以进行嵌套，也就是说我们可以引用父级 $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";
});
run 方法用于 初始化 全局的数据，仅对全局作用域起作用。 我们可以在 AngularJS 应用的模板中使用多种标记，包括下面这些。 1. 指令：将 DOM 元素增强为可复用的 DOM 组件的属性或元素。 2. 值绑定：模板语法 {{ }} 可以将表达式绑定到视图上。 3. 过滤器：可以在视图中使用的函数，用来进行格式化。 4. 表单控件：用来检验用户输入的控件。
1. 提供观察者以监视数据模型的变化； 2. 可以将数据模型的变化通知给整个应用，甚至是系统外的组件； 3. 可以进行嵌套，隔离业务功能和数据； 4. 给表达式提供运算时所需的执行环境。 开发 AngularJS 应用的大部分工作内容，就是构建作用域及其相关的功能。 作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（ view model ）。 前面的例子中，我们在$rootScope中设置了一个name变量并在视图中引用了它：
angular.module('myApp',[])
.run(function($rootScope) {
$rootScope.name = "World";
});在视图中可以引用这个name属性并将它展示给用户：
<div ng-app="myApp">
<h1>Hello {{ name }}</h1>
</div>
我们可以不将变量设置在
$rootScope
上，而是用控制器显式创建一个隔离的子
$scope
对象，把它设置到这个子对象上。使用
ng-controller
指令可以将一个控制器对象附加到
DOM
元素上，如下所示：
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>
我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上：
angular.module("myApp",[])
.controller('MyController',function($scope) {
$scope.name = "Ari";
});ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。
当
Angular
关心的事件发生在浏览器中时，比如用户在通过
ng-model
属性监控的输入字段中输入，或者带有
ng-click
属性的按钮被点击时，
Angular
的事件循环都会启动。这个事件将在
Angular
执行上下文中处理。
每当事件被处理时，$scope就会对定义的表达式求值。此时事件循环会启动，并且Angular应用会监控应用程序内的所有对象，脏值检测循环也会运行。
$scope的生命周期： $scope 对象的生命周期处理有四个不同阶段。1. 创建 在创建控制器或指令时， AngularJS 会用 $injector 创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。 2. 链接 当 Angular 开始运行时，所有的 $scope 对象都会附加或者链接到视图中。所有创建 $scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当 Angular 应用上下文中发生变化时需要运行的函数。 这些函数被称为 $watch 函数， Angular 通过这些函数获知何时启动事件循环。 3. 更新 当事件循环运行时，它通常执行在顶层 $scope 对象上（被称作 $rootScope ），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化， $scope 对象就会触发指定的回调函数。 4. 销毁 当一个 $scope 在视图中不再需要时，这个作用域将会清理和销毁自己。 尽管永远不会需要清理作用域（因为 Angular 会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这个 $scope 上叫做 $destory() 的方法来清理这个作用域。 指令在AngularJS中被广泛使用，指令通常不会创建自己的$scope，但也有例外。比如ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |