首页 技术 正文
技术 2022年11月14日
0 收藏 965 点赞 2,518 浏览 1326 个字

作用域的概念及其功能

AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用。由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重新渲染视图。AngulaJS将 $scope设计成DOM类似的结构, $scope可以嵌套,同时也可以引用父级 $scope的属性。作用域提供监视数据模型变化的能力,允许开发者使用其中的apply机制,将数据模型的变化在整个应用范围内进行通知。

作用域的功能可以总结为以下几点:

  1. 提供观察者( $watch)以监视数据模型的变化
  2. 将数据模型的变化通知整个应用
  3. 可以嵌套,隔离业务功能和数据
  4. 创建表达式运算所需的执行环境

$rootScope & $scope

$rootScope是AngularJS最顶层的作用域,同ng-app元素进行绑定。一般的我们不会在 $rootScope附加太多的业务逻辑数据, $scope对象是普通的JS对象,可以访问到 $rootScope中的数据,我们一般选择在 $scope中添加修改我们的数据。scope中所有的数据都可以被视图自动的访问到。 如下代码所示:

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

我们希望name是 $scope的一个属性,那么可以使用如下代码来实现这一点:

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

这个例子中我们使用 $rootScope来绑定name的属性, 在视图中引用这个name属性来将它展示给用户。一般的我们不将变量直接设置在 $rootScope上,而是用控制器显示的创建 $scope对象,并把它设在这个对象中。那么代码可以修改为:

<div ng-app = "myApp">
<div ng-controller = "MyController">
<!--name的"作用域"限于MyController内-->
<h1>hello {{name}} </h1>
</div>
</div>

通过创建控制器来管理与其相关的变量,代码如下所示:

angular.module("myApp",[]).controller("MyController", function( $scope){
$scope.name = "Ari";
});

$socpe的生命周期

scope的生命周期处理主要包含以下几个阶段:

  1. 创建: AngularJS启动时,会使用 $injector创建一个新的作用域,将作用域传进相应的控制器或指令中

    注意: AngularJS除了ng-controller和ng-repeat指令会创建自己的子作用域,一般不会创建自己的 $scope

  2. 链接: AngularJS运行时,所有的 $scope对象都会链接到视图上,通过注册 $watch函数来获取数据变化通知

  3. 更新: AngularJS通过在顶层 $scope对象执行事件循环,每个自作用域都会执行自己的脏值检测,每个监控函数会检查变化,如果检测到变化,则 $scope对象触发指定的回调函数

  4. 销毁: $socpe上可以通过使用 $destoy()方法销毁作用域

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,581
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918