AngularJs(三)作用域

作用域(scope)是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的。

AngularJS将 $scope 设计成和DOM类似的结构,因此 $scope 可以进行嵌套,也就是说我们可以引用父级 $scope 中的属性。$scope是表达式作用的上下文,是视图和控制器之间的“胶水”。我们通常习惯首先使用控制器去读取模型中的数据,然后将处理后的数据放到$scope当中,这样我们在控制器的作用范围之内就可以直接读取到$scope中的数据,并通过表达式的方式在视图中展示出来。

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

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

示例:

<div ng-app="myApp">
<h1>Hello{{ name }}</h1>
</div>
<script>
         angular.module('myApp',[ ])
.run(function($rootScope) {
$rootScope.name = "World";
});
</script>


我们可以不将变量设置在$rootScope 上,而是用控制器显式创建一个隔离的子 $scope 对象,

把它设置到这个子对象上。使用ng-controller 指令可以将一个控制器对象附加到DOM元素上,

如下所示:

<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>
<script>
angular.module("myApp", [ ])
.controller('MyController',[‘$scope’,
function($scope) {
$scope.name = "Ari";
}]);
</script>


这里顺带提一下,上面的写法其实阅读性并不是很好,因为我们把Controller函数写在了传参数组当中,各种括号参杂在一起。下面的写法会好一点:

<script>
angular.module("myApp", [ ])
.controller('MyController',[‘$scope’,MyController]);
  function MyController($scope){
$scope.name = "Ari";
}
</script>


 

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

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

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

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

  4.给表达式提供运算时所需的执行环境。

 

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

4.4.1 创建

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

4.4.2 链接

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

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

4.4.3 更新

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

4.4.4 销毁

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值