AngularJs(三)作用域

原创 2016年05月30日 15:33:11

作用域(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 在视图中不再需要时,这个作用域将会清理和销毁自己。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS 0005:作用域

  • 2016-12-01 20:02
  • 156KB
  • 下载

AngularJS(三)——作用域

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

angularJS<四、多个Controller的作用域>

angularJs的作用域是针对于在html页面里面引入ng-Controller的位置来说的,angularjs的controller和javaScript的作用域很类似;如:          d...

AngularJS Scope(作用域)

1、Scope 概述AngularJS 应用组成如下: View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 ...

AngularJS 中的Scope(作用域)

Scope是作用在HTML(视图)和JS(控制器)之间的纽带 Scope是一个JS对象,有可用的方法和属性,这些属性和方法可以在视图(即HTML页面)和控制器(即JS文件中)使用。 Scope可应用在...
  • MPFLY
  • MPFLY
  • 2017-08-04 15:57
  • 147

angularjs在指令中使用子作用域

下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起。 13 ng-app和ng-controller是特殊的指令...

构建自己的AngularJS,第一部分:作用域和digest

原文链接:http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html Angul...

angularJs中controller控制器scope父子集作用域实例

1.ctrl1是父级控制器,ctrl2和ctrl3都是ctrl1的子级控制器, 2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变, 3.但是ctrl2有自己的na...

AngularJS初识--作用域

作用域是构成AngularJS应用的核心基础,在整个框架中都被广泛使用。作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现个用户之前,视图中的模板和作用域进行连接,然后应用会对DOM进行设置以便将...

日积(Running)月累(ZSSURE):nginx配置、putty连接保持以及AngularJS作用域$scope

背景:日积月累系列主要用于自己日常的工作中的点点滴滴,这也是我希望并鼓励公司小伙伴们能够做到和坚持的。作为程序员每天的工作难免会遇到种种错误,各种问题。不能抱有奢望每天没有问题的心态,而应该怀揣一个勇...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)