AngularJS权威教程第4章作用域Scope

最新推荐文章于 2020-12-23 11:26:41 发布

奋斗码农

最新推荐文章于 2020-12-23 11:26:41 发布

阅读量812

点赞数 1

分类专栏： AngularJS 文章标签： AngularJS AngularJS权威教程 AngularJS作用域Scope

本文链接：https://blog.csdn.net/xufei512/article/details/50378815

版权

AngularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AngularJS权威教程第4章作用域Scope

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

应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

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

4.1 视图和$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";
      });

完整代码如下：

<!doctype html>
<html>
<head>
  <title>Scopes Example</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp">
    <h1>Hello {{name}}</h1>
  </div>

  <script>
    angular.module("myApp", [])
      .run(function($rootScope){
        $rootScope.name = "World";
      });
  </script>
</body>
</html>

我们可以在AngularJS应用的模板中使用多种标记，包括下面这些。

指令：将DOM元素增强为可复用的DOM组件的属性或元素。
值绑定：模板语法{{ }}可以将表达式绑定到视图上。
过滤器：可以在视图中使用的函数，用来进行格式化。
表单控件：用来检验用户输入的控件。

4.2 作用域能做什么
作用域有以下的基本功能：

提供观察者以监视数据模型的变化；
可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
可以进行嵌套，隔离业务功能和数据；
给表达式提供运算时所需的执行环境。

开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能。

作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（view model）。

前面的例子中，我们在$rootScope中设置了一个name变量并在视图中可以引用这个name属性并将它展示给用户。我们可以不

将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象，把它设置到这个子对象上。使用ng-controller指

令可以将一个控制器对象附加到DOM元素上。

我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上，ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。

完整代码如下：

<!doctype html>
<html>
<head>
  <title>Scopes Example</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>
<body>
  <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 = "World";
      }]);
  </script>
</body>
</html>

4.3 $scope 的生命周期

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

4.3.1 创建

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

当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。

这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为$watch函数，Angular通过这些函数获

知何时启动事件循环。

4.3.3 更新
当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控

函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

4.3.4 销毁
当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。
尽管永远不会需要清理作用域（因为Angular会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这

个$scope上叫做$destory()的方法来清理这个作用域。

4.4 指令和作用域