Angular 学习笔记(三)
调试时抓取作用域:
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 学习笔记(三)的更多相关文章
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- angular学习笔记(三十)-指令(8)-scope
本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...
随机推荐
- sed 面试题
#oldboy my qq num is 49000448.$ not 4900000448. my god ,i am not oldbey,but clsn!$ #oldboy my name i ...
- 剑指offer 23:从上往下打印二叉树
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 解题思路 按照从左往右从上到下的顺序打印节点,需要我们维护一个队列,这个队列放入元素的顺序是访问队头节点(起始先放入根节点),则若当前 ...
- [logstash.outputs.elasticsearch] retrying failed action with response code: 403
0x00 Event [2019-09-24T19:22:31,655][INFO ][logstash.outputs.elasticsearch] retrying failed action w ...
- cookie,webstorage的理解
在前两天的开发时,遇到一个问题,需要将一个网页在预加载时,优先出一个弹出框,但是再次加载时不希望它出现,在经过一段时间的搜索和尝试之后,发现了大多使用的两种方式:生成cookie和webStorage ...
- 网络时间服务和chrony
⽹络时间服务和chrony 实验练习: 准备实验环境: 可用的centos6.7系统. centos6 :192.168.37.6 centos7 :192.168.37.7 关闭selinux 关闭 ...
- 解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误
一 问题说明在创建Model的时候,如果存在类型是DateTimeField的字段,则在xadmin后端管理界面里,对该Model进行添加操作的时候,会报list index out of range ...
- 程序运行时间测试 - 使用libc 中 time 函数 实现秒级的运行时间检测
c 标准库中,有time 函数,可以返回 1970年1月1日 开始到现在的秒数,我们可以调用两次的时间差来计算程序运行时间: https://github.com/yaowenxu/Workplace ...
- TensorFlow从1到2(十四)评估器的使用和泰坦尼克号乘客分析
三种开发模式 使用TensorFlow 2.0完成机器学习一般有三种方式: 使用底层逻辑 这种方式使用Python函数自定义学习模型,把数学公式转化为可执行的程序逻辑.接着在训练循环中,通过tf.Gr ...
- JavaScript-----6.流程控制:分支
1.流程控制 就是来控制代码按照何种顺序来执行,流程控制有三种结构:顺序结构.分支结构.循环结构 2.顺序流程控制 程序按照代码先后顺序依次执行 3.分支流程控制 JS中提供两种分支结构语句:if语句 ...
- python的imread、newaxis
一:imread 用来读取图片,返回一个numpy.ndarray类型的多维数组,具有两个参数: 参数1 filename, 读取的图片文件名,可以使用相对路径或者绝对路径,但必须带完整的文件扩展名( ...