AangularJS入门总结三
(参考的资料)
1. 数据绑定的原理:
(1) $watch 队列: 在DOM中每次绑定一些东西,就会往$watch队列中插入一条$watch;
每一个绑定到了DOM上的数据都会生成一个$watch;我们的模版加载完毕时,在linking阶段(Angular分为compile阶段和linking阶段),
Angular解释器会寻找每个directive,然后生成每个需要的$watch。
(2) $digest 循环:当浏览器接收到可以被angular context处理的事件时,$digest循环就会触发;
这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列,另一个处理$watch队列。
处理$watch队列:循环$watch 队列,发现这个队列中的值有变化,就执行回调函数,执行相应的DOM操作;
如果有至少一个更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。
如果循环超过10次的话,它将会抛出一个异常,防止无限循环。当$digest循环结束时,DOM相应地变化;
(ng-click不生成$watch(函数是不会变的));
(3) $apply : $apply决定什么事件进入 angular上下文环境;、
当事件触发时,你调用$apply,它会进入angular context,如果没有调用就不会进入。
当你点击带有ng-click的元素时,就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框,然后你敲一个f,
事件就会这样调用$apply("foo = 'f';")。
Angular什么时候不会自动为我们调用$apply呢?Angular不会更新我绑定的东西的解决方法:scope.$apply(function() {});
$apply是我们的$scope(或者是direcvie里的link函数中的scope)的一个函数,调用它会强制一次$digest循环
(除非当前正在执行循环,这种情况下会抛出一个异常)。
2. 自定义指令:angular通过指令的方式实现了HTML的扩展;
指令在框架中的执行流程:
--浏览器得到 HTML 字符串内容,解析得到 DOM 结构。
--Angular引入,把 DOM 结构扔给 $compile 函数处理:
---找出 DOM 结构中有变量的占位符;
---匹配找出 DOM 中包含的所有指令引用;
---把指令关联到 DOM;
---关联到 DOM 的多个指令按权重排列;
---执行指令中的 compile 函数(改变 DOM 结构,返回 link 函数);
---得到的所有 link 函数组成一个列表作为 $compile 函数的返回。
--执行 link 函数(连接模板的 scope)。
---注意区别一下$compile和compile,前者是Angular内部的编译服务,后者是指令中的编译函数,两者发挥作用的范围不同。
compile 和 link 函数息息相关又有所区别;
Angular编译的工作是解析指令、绑定监听器、替换模板中的变量等。工作方式很像高级语言编辑中的递归、堆栈过程,所以起名为编译;
指令的使用方式及命名方法:
指令的几种使用方式如下:(常用的就是作为 标签 和 属性)
作为标签:<my-dir></my-dir>
作为属性:<span my-dir="exp"></span>
作为注释:<!-- directive: my-dir exp -->
作为类名:<span class="my-dir: exp;"></span>
指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时像这样:<my-directive>;
自定义指令的配置参数:
下面是定义一个标准指令的示例,可配置的参数包括以下部分:
myModule.directive('namespaceDirectiveName', function factory(injectables) {
var directiveDefinitionObject = {
restrict: string, //指令的使用方式,包括标签,属性,类,注释
priority: number, //指令执行的优先级
template: string, //指令使用的模板,用HTML字符串的形式表示
templateUrl: string, //从指定的url地址加载模板
replace: bool, //是否用模板替换当前元素,若为false,则append在当前元素上
transclude: bool, //是否将当前元素的内容转移到模板中
scope: bool or object, //指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...}, //定义与其他指令进行交互的接口函数
require: string, //指定需要依赖的其他指令
link: function postLink(scope, iElement, iAttrs) {...}, //以编程的方式操作DOM,包括添加监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
} //编程的方式修改DOM模板的副本,可以返回链接函数;
};
return directiveDefinitionObject;
});
(根据自己的需要来选择使用哪些参数。priority和compile用的比较少,template和templateUrl又是互斥的,两者选其一即可)
指令的表现配置参数:restrict、template、templateUrl、replace、transclude;
指令的行为配置参数:compile 和 link;
指令划分作用域配置参数:scope;
指令间通信配置参数:controller和require。
指令的表现参数restrict、template、templateUrl、replace、transclude:
transclude:指定了transclude为true,并在模板标签上面使用了ng-transclude指令,用来告诉指令把内容转移到的位置;
restirct用来指定指令的使用类型,其取值及含义:
取值 |
含义 |
使用示例 |
E |
标签 |
<my-menu title=Products></my-menu> |
A |
属性 |
<div my-menu=Products></div> |
C |
类 |
<div class="my-menu":Products></div> |
M |
注释 |
<!--directive:my-menu Products--> |
指令的行为参数:compile 和 link:
如果指令只进行DOM的修改,不进行数据绑定,那么配置在compile函数中,如果指令要进行数据绑定,那么配置在link函数中。
compile拿到的是编译前的,是从template里拿过来的,link拿到的是编译后的,已经与作用域建立了关联,这也正是link中可以进行数据绑定的原因。
指令的划分作用域参数:scope:
作用是描述指令与父作用域的关系;
指令与父作用域(就是控制器所管辖的范围)的关系可以有如下取值:
取值 |
说明 |
false |
默认值。使用父作用域作为自己的作用域 |
true |
新建一个作用域,该作用域继承父作用域 |
javascript对象 |
与父作用域隔离,并指定可以从父作用域访问的变量 |
绑定策略,它的取值按照如下的规则:
符号 |
说明 |
举例 |
@ |
传递一个字符串作为属性的值 |
str : ‘@string’ |
= |
使用父作用域中的一个属性,绑定数据到指令的属性中 |
name : ‘=username’ |
& |
使用父作用域中的一个函数,可以在指令中调用 |
getName : ‘&getUserName’ |
自定义指令中的 scope; 用符号前缀来说明如何为指令传值;
scope : {
name : ‘=username’
},
指令间通信参数:controller 和 require:
当想做的组件稍微复杂一点,就不是一个指令可以搞定的了,就需要指令与指令的协作才可以完成,这就需要进行指令间通信;
controller 数用于定义指令对外提供的接口,它的写法如下:
controller: function controllerConstructor($scope, $element, $attrs, $transclude){}
require:它的值是一个字符串,就是所依赖的指令的名字,这样框架就能按照你指定的名字来从对应的指令上面寻找定义好的controller了。
不过还稍稍有点特别的地方,为了让框架寻找的时候更轻松些,我们可以在名字前面加个小小的前缀:^,表示从父节点上寻找,
使用起来像这样:require : ‘^directiveName’,如果不加,$compile服务只会从节点本身寻找。
另外还可以使用前缀:?,此前缀将告诉$compile服务,如果所需的controller没找到,不要抛出异常。
3. 性能:
缺点:当处理包含复杂数据结构的大型列表时,其运行速度就会非常慢;
两个主要性能问题:一个与“ng-repeat ”指令有关,另一个与过滤器有关;
最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现;
分页,我们可以使用AngularJS的“limitTo”过滤器(AngularJS1.1.4版本以后)和“startFrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。
AangularJS入门总结三的更多相关文章
- 无废话ExtJs 入门教程三[窗体:Window组件]
无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...
- RequireJS入门(三)转
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- RequireJS入门(三)
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- 【SSRS】入门篇(三) -- 为报表定义数据集
原文:[SSRS]入门篇(三) -- 为报表定义数据集 通过前两篇文件 [SSRS]入门篇(一) -- 创建SSRS项目 和 [SSRS]入门篇(二) -- 建立数据源 后, 我们建立了一个SSRS项 ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门(三)<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- PHP基础入门(三)---PHP函数基础
PHP基础入门(三)---函数 今天来给大家分享一下PHP的函数基础.有了前两章的了解,想必大家对PHP有了一定的基础了解.想回顾前两章的朋友可以点击"PHP基础入门(一)"&qu ...
- mybatis入门系列三之类型转换器
mybatis入门系列三之类型转换器 类型转换器介绍 mybatis作为一个ORM框架,要求java中的对象与数据库中的表记录应该对应 因此java类名-数据库表名,java类属性名-数据库表字段名, ...
- Java入门(三):变量和运算符
上次谈到了Java的基本数据类型,今天接着聊Java的变量.运算符. 一.变量 1.变量的分类 变量分为成员变量.局部变量和常量,其中成员变量又分为实例变量.类变量. 2.变量的定义 语法:变量类型( ...
随机推荐
- java 的类型转换方式
隐式转换 byte等整型转int,最高位(符号位保留),中间补0 byte bt=-13; bt 源码:1000 1101 反码:1111 0010 补码:1111 0011 int it=bt; i ...
- UVa 11039 - Building designing 贪心,水题 难度: 0
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- python学习 面向对象高级编程
---恢复内容开始--- 面向对象编程---oop,是一种编程思想,oop把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向过程的程序设计把计算机程序视为一系列的命令集合,即一组函数 ...
- RabbitMQ 队列、消息持久化
RabbitMQ的消息队列的持久化是一个很不错的功能,设置也非常简单.如下代码: 1.设置队列持久化(在声明队列的时候设置) channel.QueueDeclare(queue: "q.l ...
- TypeError: write() argument must be str, not bytes报错原因及Python3写入二进制文件方法
Python2随机写入二进制文件: with open('/python2/random.bin','w') as f: f.write(os.urandom(10)) 但使用Python3会报错: ...
- cv::ACCESS_MASK指定不明确的错误
今天想实现在opencv下使用模拟按键,结果出现cv::ACCESS_MASK指定不明确的错误,查找得到如下原因: 在winnt.h里面有一个cv的命名空间,同样定义了一个ACCESS_MASK,跟o ...
- SQL-38 创建视图
题目描述 针对actor表创建视图actor_name_view,只包含first_name以及last_name两列,并对这两列重新命名,first_name为first_name_v,last_n ...
- angular 离开页面相关操作
$scope.$on("$destroy", function() { $interval.cancel(autoRefresh);})
- 组队项目——黄金点(叶雨&王浩)
代码来源:自己编写 运行环境:win10 编译软件:VC++6.0 使用语言:C语言 功能:可多次运行,由用户决定退出与否,可以记录玩家的姓名与分数并显示. BUG:暂未发现 GitHub地址:htt ...
- Java语法基础学习DaySix
一.JavaBean——可重用组件 1.JavaBean是指符合以下标准的Java类: (1)类是公共的 (2)有一个无参的公共的构造器 (3)有属性,且有对应的get.set方法 2.好处 用户可以 ...