调试时抓取作用域:

  1、右键选取审查元素,调出 debugger(或按 F12

  2、调试器允许用变量 $0 来获取当前选取的元素

  3、在 console 中执行 angular.element($0).scope() 或直接输入 $scope 即可看到需要查询的当前 DOM 元素节点绑定的作用域

基于作用域的事件传播:

  1、broadcasted:父级作用域广播至子级作用域

  2、emitted:子级作用域往上发射到父级作用域

补充:

  1、$emit:该服务贯穿作用域发出一个向上的事件,并通知那些注册在 rootScope.Scope 上的监听器;

          起始于 emit 被启动的地方,向上传播;若有一个监听器接受了这个事件,则会停止继续向上传播

  2、$broadcast:与 $emit 的方向相反,且监听器接受到通知后并不会注销事件,而是继续向下传播

  3、$on:该服务监听指定类型的事件,获取从 emit 或 broadcast 发布的事件

浏览器接受一个事件的标准工作流程:

  接收事件 ==》触发回调 ==》回调执行结束返回 ==》浏览器重绘 DOM ==》浏览器返回等待下一个事件

当浏览器的控制权跑到原生的 Javascript 中去时,则执行上下文就发生在 Angular 的上下文之外 ==》Angular 无法得知数据模型的任何改变

  ==》使用 $apply 方法让上下文执行环境重新进入 Angular 的上下文中($scope.$apply())==》数据模型改变从而被识别

在计算完表达式后,$apply()  方法执行 Angular 的 $digest 阶段(可认为是必要的缓冲阶段

  ==》scope 检查所有通过 $watch() 监听的表达式(或别的数据)并将其与它们之前的值进行比较《== 脏值检查(dirty checking)

注:$watch() 的监测是异步的,需要等 $digest 阶段跑完才调用

scope 生命周期拆解:

  1、创建期:root scope 是在应用程序启动时由 $injector 创建的;另外,在指令的模板链接阶段(template linking),指令会创建一些新的子级 scope

  2、注册期:在模板链接阶段,指令会往作用域中注册监听器,而且不止一个,这些 $watch 用来监测数据模型的更新并将更新值传给 DOM

  3、数据模型变化:数据模型的变化应在 Angular 的监测之下($scope.$apply()),对于 Angular 本身的 API 不用显式地调用该函数

  4、数据模型变化监测:把数据模型变化 $apply 后,Angular 开始进入 $digest 轮循(调用 $digest() 方法),从父级到子级依次执行,

                                        若监听到自己负责地数据模型有变化,则调用 $watch

  5、销毁作用域:当子级作用域不再需要的时候,这时创建它们的就会负责把它们回收或者销毁;可通过 scope.$destroy() 显式销毁或直接隐式销毁;

                              之后 $digest() 方法就不会继续往子级作用域传播了

Angular 学习笔记(三)的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  10. angular学习笔记(三十)-指令(8)-scope

    本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...

随机推荐

  1. git合并多次commit提交

    在开发项目工程中经常会遇到为了一个需求产生多次提交记录.有些是可以接受的,比如按照功能点不同进行的提交.但往往会存在这种,只为了一个小东西进行改动,比如多余文件的提交.书写不规范而不得不提交的情况.多 ...

  2. php 7.1.32 +Apache 2.4 配置 (x64)

    最近phpstudy 后门事件一出,吓得小编瑟瑟发抖,决心自己配置环境不再用集成环境. 一.apache 配置 首先我们先去apache 官网下载apache apache2.4地址:https:// ...

  3. ASA 笔记

    show logging 缓存日志FW(config)# show run route 查看路由 FW(config)# ip verify reverse-path interface Outsid ...

  4. LG1344 「USACO4.4」Pollutant Control 最小割

    问题描述 LG1344 题解 我太菜了,我一开始竟然没有看出这是个最小割裸题... 两个询问. 第一个询问,直接跑最小割就好了. 第二个询问,建图的时候边权建 \(1\) ,代表割掉这条边需要 \(1 ...

  5. 推荐一款好用到爆的开源 Java 诊断工具

    Arthas是什么鬼?Arthas是一款阿里巴巴开源的 Java 线上诊断工具,功能非常强大,可以解决很多线上不方便解决的问题. Arthas诊断使用的是命令行交互模式,支持JDK6+,Linux.M ...

  6. springboot+jpa分库分表项目实例

    分库分表场景 关系型数据库本身比较容易成为系统瓶颈,单机存储容量.连接数.处理能力都有限.当单表的数据量达到1000W或100G以后,由于查询维度较多,即使添加从库.优化索引,做很多操作时性能仍下降严 ...

  7. autojump--懒人利器

    只有打开过的目录 autojump 才会记录,所以使用时间越长,autojump 才会越智能. 可以使用 autojump 命令,或者使用短命令 j. 跳转到指定目录 j directoryName ...

  8. dell服务器已有阵列新增的磁盘无法识别显示外来

    问题描述: 今天遇到个插入新硬盘显示外来盘,然后不可用,然后电话问了一下戴尔的工程师 说需要清除一下原来磁盘的阵列信息之类的,才能识别到,这里就做一个笔记记录一下,顺便分享给有需要的朋友! 解决方法: ...

  9. IT兄弟连 HTML5教程 HTML5的基本语法 了解Web

    HTML也是计算机编程语言,但由于功能简单易用,不涉及业务逻辑,算是编程语言中最简单的了.其实学习HTML这门语言,就是在学习一个个HTML标记的使用,标记的名称和使用不是自定义的,它的功能及用法是已 ...

  10. PHP JWT token实现

      原文链接:https://www.jb51.net/article/146790.htm   机制:   代码如下:   <?php /**  * PHP实现jwt  */ class Jw ...