一、基本概念

　　作用域是一个指向应用模型的对象，相当于MVVM中的ViewModel，能绑定数据（属性）和行为（方法），能监控表达式和传递事件，是实现双向绑定的基础，是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带，是连接视图和控制器的一个特殊的JavaScript对象。

　　作用域是一个树型层次结构，与DOM标签平行，有根作用域，多个子作用域，子作用域下又有子作用域。所有的应用都有一个 $rootScope，它作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。ng-app 指令可以产生一个根作用域之外，一些 指令会创建新的子作用域，并且进行原型继承，如 ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 另外，用 scope: true 和 transclude: true 创建自定义 directive也会产生新作用域。

　　作用域变量性质，有局部变量和全部变量之分，全局变量可以在方法，或者闭包内引入，而局部变量只能在定义的方法内使用，其他方法引用不到，$rootscope相当于全部变量，不应在 $rootScope附加太多的业务逻辑数据（全局），而是用控制器显示的创建 $scope对象来管理自己相关的逻辑和数据（局部）。

　　作用域继承性，子作用域自动继承父作用域的属性和方法，如果自己有就用自己的同名属性和方法。有如下内部关系

　　　　scope.$parent ：指向scope的父作用域

　　　　scope.$$childHead：指向scope的第一个子作用域

　　　　scope.$$childTail：指向scope的最后一个子作用域

　　　　scope.$$nextSibling：指向scope的下一个相邻作用域

　　　　scope.$$prevSibling：指向scope的上一个相邻作用域

　　例子：　　

<html>

<head>

  <title>Angular JS</title>

</head>

<body>

  <h2>AngularJS Sample</h2>
　　<!--绑定ng-app产生$rootscope，还有产生一个当前作用域$scope(shapeController),这里产生两个作用域-->
   <!--message和type都显示自己的-->

  <div ng-app="mainApp" ng-controller="shapeController">

   <p>{{message}} <br/> {{type}} </p>
　　<!--产生一个子作用域（circleController）-->
　　<!--message显示自己的，type没定义，就显示继承过来的type-->

   <div ng-controller="circleController">

     <p>{{message}} <br/> {{type}} </p>

   </div>
　　<！--产生另一个平行子作用域(squareController)-->
　　<!--message和type都显示自己的，虽然和根作用域有继承关系-->

   <div ng-controller="squareController">

     <p>{{message}} <br/> {{type}} </p>

   </div>

  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

  <script>

   var mainApp = angular.module("mainApp", []);

 　//父控制器，产生父作用域

   mainApp.controller("shapeController", function($scope) {

     $scope.message = "In shape controller";

     $scope.type = "Shape";

   });

 　//子作用域，没type，用父作用域的type

   mainApp.controller("circleController", function($scope) {

     $scope.message = "In circle controller";

   });

 　//另一个平行子作用域,有type用自己的type

   mainApp.controller("squareController", function($scope) {

     $scope.message = "In square controller";

     $scope.type = "Square";

   });

  </script>

</body>

</html>

二、作用域上的$watch()、$apply()方法

1、watch()　

　　用于监听模型变化,当模型发生变化，它会提示你的。

　　表达式： $watch(watchExpression, listener, objectEquality);

　　其参数：

　　　　watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

　　　　listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)。

　　　　objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

　　console.log(newValue);

   console.log(oldValue);

});

$timeout(function(){

　　$scope.name = "world";

},1000);

　　在后台显示world，1秒后，会变成hello，$timeout内部会触发$scope.$apply()

2、$apply()

　　用于传播模型的变化，如果一些javascript方法，如setTimeout，调用了AngularJS 函数之后，必须调用$apply。

$scope.test = function() {

    setTimeout(function () {

        $scope.$apply(function () {

            $scope.user = "hello";

        });

    }, 2000);

}

　不能写成下边的代码，这样不能实现双向数据绑定。

$scope.test = function() {

    setTimeout(function () {

        $scope.user = "hello";

    }, 2000);

}

三、作用

　　1、提供了观察者可以监听数据模型的变化

　　2、可以将数据模型的变化通知给整个 App

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

　　4、给表达式提供上下文执行环境

四、$socpe的生命周期

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

　　1、创建： AngularJS启动时，会使用 $injector创建一个根作用域，将作用域传进相应的控制器或指令中

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

　　2、链接（注册观察者）： AngularJS运行时，指令会创建自己的作用域，所有的 $scope对象都会链接到视图上，通过注册 $watch函数来获取数据变化通知

　　3、模型状态改变：更新模型状态必须发生在scope.$apply方法中才会被观察到。Angular框架封装了$apply过程，无需我们操心。

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

　　5、销毁： 当不再需要子作用域时，$socpe上可以通过使用 $destoy（）方法销毁作用域，回收资源。

AngularJS $scope 继承性 作用 生命周期的更多相关文章

  1. SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession作用域（Scope）和生命周期

    可以说每个MyBatis都是以一个SqlSessionFactory实例为中心的.SqlSessionFactory实例可以通过SqlSessionFactoryBuilder来构建.一是可以通过XM ...

  2. MyBatis 作用域（Scope）和生命周期

    SqlSessionFactoryBuilder SqlSessionFactoryBuilder的作用是创建SqlSessionFactory.一旦创建了SqlSessionFactory,就不再需 ...

  3. Mybatis笔记六：Mybatis中SqlSessionFactoryBuilder/SqlSessionFactory/SqlSession/映射器实例的作用域（Scope）和生命周期

    SqlSessionFactoryBuilder 这个类可以被实例化.使用和丢弃,一旦创建了 SqlSessionFactory,就不再需要它了.因此 SqlSessionFactoryBuilder ...

  4. .NET Core 对象( Transient、Scope、Singleton )生命周期详解 (对象创建以及释放)

    首先我们在VS2019中创建一个.NET Core的控制台程序,方便演示: 需要安装两个依赖包 Microsoft.Extensions.DependencyInjection 依赖注入对象的具体实现 ...

  5. net core体系-web应用程序-4net core2.0大白话带你入门-9asp.net core服务的生命周期

    asp.net core服务的生命周期   Transient:每一次GetService都会创建一个新的实例 Scoped:在同一个Scope内只初始化一个实例 ,可以理解为( 每一个request ...

  6. asp.net core服务的生命周期

    Transient:每一次GetService都会创建一个新的实例 Scoped:在同一个Scope内只初始化一个实例 ,可以理解为( 每一个request级别只创建一个实例,同一个http requ ...

  7. Mybatis学习-配置、作用域和生命周期

    核心配置文件:Mybatis-config.xml Mybatis的配置文件包含了会深深影响Mybatis行为的设置和属性信息 配置(configuration) 在mybatis-config.xm ...

  8. @Scope注解设置创建bean的方式和生命周期

    1.1.1            Scope注解创建bean的方式和生命周期 作用 Scope设置对象在spring容器(IOC容器)中的生命周期,也可以理解为对象在spring容器中的创建方式. 取 ...

  9. spring作用、spring注解、管理对象的作用域与生命周期、自动装配、Spring的框架包有哪些作用是什么

    Spring 1. 作用 创建和管理对象,使得开发过程中,可以不必使用new关键字创建对象,而是直接获取对象!并且,还可以通过一些配置,使得某些获取到的对象,其中某些属性已经是被赋值的! 2. Spr ...

随机推荐

  1. js对象(BOM部分/DOM部分)

    JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览 ...

  2. Spring 系列教程之自定义标签的解析

    Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...

  3. Mysql 注入load_file常用路径

    WINDOWS下: c:/boot.ini //查看系统版本 c:/windows/php.ini //php配置信息 c:/windows/my.ini //MYSQL配置文件,记录管理员登陆过的M ...

  4. java多线程知识点

    下面是我学习多线程记录的知识点,并没详细讲解每个知识点,只是将重要的知识点记录下来,有时间可以看看,如果有不对的地方,欢迎大家指出,谢谢! 1.多线程的状态和创建方式:     线程的状态:      ...

  5. 将hibernate框架融入到spring框架中

    第一步:首先创建表: create table  user( id int(2) primary key,name varchar(20),password varchar(20)); 第二步:建立d ...

  6. 弹出DIV锁定代码

    <html>  <head>  <meta http-equiv="Content-Type" content="text/html; ch ...

  7. 【Java】生成图形验证码

    本章介绍一个能生成比较好看的图形验证码类 生成验证码工具类 package com.util; import java.awt.Color; import java.awt.Font; import ...

  8. centos7 hbase 搭建笔记

    1.require:java环境,本地可用的hadoop 2.拷贝hbase文件(hive-1.2.6) 3.设置环境变量 export HBASE_HOME=/data/spark/bin/hbas ...

  9. oracle in 多个字段

    oracle 使用in的时候使用多个字段 这个也是刚需啊. 最近有个需求,在一堆商品里面过滤出一些特定的商品类型.供应商的商品(同时满足). 需要的数量不多,但是可能会变化,所以做了两个配置表. 商品 ...

  10. 2018.12.17 hdu2138 How many prime numbers（miller-rbin）

    传送门 miller−rabbinmiller-rabbinmiller−rabbin素数测试的模板题. 实际上miller−rabinmiller-rabinmiller−rabin就是利用费马小定 ...