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学习整理---浅谈$scope(作用域) 新手必备!

作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正。    ...
  • wl11295210
  • wl11295210
  • 2017年02月17日 09:15
  • 2014

angularJS中的父子作用域和兄弟作用域,以及父子,兄弟controller通信机制

angularJS中非常重要的概念之一就是作用域,不同的作用域之间是相互隔离的,通过常规手段是无法互相访问变量及方法的 本次我们着重讲一下父子作用域和兄弟作用域 1.父子作用域 ...
  • Sourcecode_poet
  • Sourcecode_poet
  • 2016年12月07日 19:42
  • 3590

AngularJS中变量的作用域

本篇将会总结下面的内容:   1 为何需要独立作用域   2 如何实现独立作用域   3 作用域的数据绑定 之前有一些错误,是由于replace拼写错误导致的。 拼写正确后,网友发现报错,无...
  • he90227
  • he90227
  • 2016年01月12日 17:32
  • 2435

AngularJS 0005:作用域

  • 2016年12月01日 20:02
  • 156KB
  • 下载

AngularJS(三)——作用域

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

构建自己的AngularJS - 作用域和Digest(三)

作用域第一章 作用域和Digest(三)$eval - 在当前作用域的上下文中执行代码Angular有多种方式让你在当前作用域的上下文中执行代码。最简单的是$eval。传入一个函数当做其参数,然后将当...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016年04月04日 11:38
  • 1216

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

背景:日积月累系列主要用于自己日常的工作中的点点滴滴,这也是我希望并鼓励公司小伙伴们能够做到和坚持的。作为程序员每天的工作难免会遇到种种错误,各种问题。不能抱有奢望每天没有问题的心态,而应该怀揣一个勇...
  • zssureqh
  • zssureqh
  • 2016年07月16日 16:08
  • 1823

构建自己的AngularJS - 作用域和Digest(一)

作用域第一章 作用域和Digest(一)Angular作用域是简单javascript对象,因此你可以像对其他对象一样添加属性。然而,他们也有一些额外的功能,用于观测数据结构的变化。这种观察能力是使用...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016年03月31日 17:09
  • 905

AngularJS的作用域$scope监视

$watch() 使用$watch()方法监视作用域中属性的变化 例子:监视&解除监视 change count: {{count}} ...
  • u011779724
  • u011779724
  • 2017年05月19日 16:57
  • 300

AngularJS的scope变量的作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上 ...
  • yang1464657625
  • yang1464657625
  • 2017年01月08日 23:14
  • 161
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJs(三)作用域
举报原因:
原因补充:

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