AngularJs自定义指令详解(10) - 执行次序
代码:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><script src="../lib/angular-1.3.16/angular.min.js"></script><script src=""></script><title></title><script language="JavaScript">var count = 0;var logText=function(text){count++;console.log(count+','+text);};angular.module("app", []).controller("mainController", function ($scope) {$scope.logText = logText;logText('控制器初始化。');}).directive('d',function() {logText('指令初始化。');return{link: {pre: function () {logText('preLink函数执行。');},post: function () {logText('postLink函数执行。');}},controller:function(){logText('内部控制器初始化。');},template:'{{logText("模板表达式执行。")}}'};});</script> </head> <body ng-app="app"> <div ng-controller="mainController"> <div d></div> <div d></div> </div> </body> </html>
看看控制台:
从控制台可以看出,指令初始化甚至比控制器还早。难道说指令一旦定义,就算不在DOM中使用也会初始化?我们删掉DOM中的
<div d></div>
<div d></div>
代码,再看控制台,发现指令并不初始化。所以推测不对。
注意我们使用了两次d指令,但是指令的初始化只运行了一次。这个要特别小心。
另外指令内部的控制器初始化比链接函数更早执行,此后就是执行preLink和postLink。一个指令把这些执行完毕,才轮到下一个指令。
模板里的表达式居然执行了6次之多,也就是说使用一次指令就要执行3次表达式,这个在性能上需要多加考虑。
以下代码加入了编译函数(compile并不常用,不需要深入了解)
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><script src="../lib/angular-1.3.16/angular.min.js"></script><script src=""></script><title></title><script language="JavaScript">var count = 0;var logText=function(text){count++;console.log(count+','+text);};angular.module("app", []).controller("mainController", function ($scope) {$scope.logText = logText;logText('控制器初始化。');}).directive('d',function() {logText('指令初始化。');return{compile: function(){logText('编译函数执行。');return{pre: function () {logText('preLink函数执行。');},post: function () {logText('postLink函数执行。');}};},controller:function(){logText('内部控制器初始化。');}};});</script> </head> <body ng-app="app"> <div ng-controller="mainController"> <div d></div> <div d></div> </div> </body> </html>
控制台输出:
可以看出编译函数比控制器更早执行,但是跟指令的初始化不同,使用两次指令就需要运行两次编译函数。
上面例子在使用指令时,元素是并列的。
那么,一个元素使用两个指令,或两个指令嵌套使用,会怎么样呢?
看代码:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><script src="../lib/angular-1.3.16/angular.min.js"></script><script src=""></script><title></title><script language="JavaScript">var count = 0;var logText=function(text){count++;console.log(count+','+text);};angular.module("app", []).controller("mainController", function ($scope) {$scope.logText = logText;logText('mainController控制器初始化。');}).directive('d1',function() {logText('d1 指令初始化。');return{priority:1,compile: function(){logText('d1 编译函数执行。');return{pre: function () {logText('d1 preLink函数执行。');},post: function () {logText('d1 postLink函数执行。');}};},controller:function(){logText('d1 内部控制器初始化。');}};}).directive('d2',function() {logText('d2 指令初始化。');return{compile: function(){logText('d2 编译函数执行。');return{pre: function () {logText('d2 preLink函数执行。');},post: function () {logText('d2 postLink函数执行。');}};},controller:function(){logText('d2 内部控制器初始化。');}};});</script> </head> <body ng-app="app"> <div ng-controller="mainController"> <div d1 d2></div> </div> </body> </html>
以上代码定义d1指令和d2指令,且它们在同一个元素上使用。注意d1的优先级更高。
关于优先级的问题,可回头看文章http://www.cnblogs.com/sagacite/p/4622092.html
控制台输出:
可以发现跟并列元素不同,在同一个元素上使用两个指令,其内部控制器初始化、preLink函数和postLink函数分组执行,而不是先执行完一个指令的,再执行下一个指令的。
更换指令的使用次序:<div d2 d1></div>
可以发现这时d2指令先初始化,但是其他函数的执行次序都不变。
修改DOM的代码如下:
<div d1><div d2></div></div>
再看控制台:
可以发现d2指令的初始化延迟到d1编译函数执行之后了。内部控制器的初始化次序也发生了变化。
转载于:https://www.cnblogs.com/minghui007/p/7161072.html
AngularJs自定义指令详解(10) - 执行次序相关推荐
- AngularJS自定义指令详解(有分页插件代码)
前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
- angularJS自定义指令详解
AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <hello></hello>或者<hello/> 2.作为一个元 ...
- Vue中过滤器和自定义指令详解
目录 1,局部过滤器 1.1定义: 1.2案例 2,全局过滤器 2.1定义: 2.2案例 3.自定义指令 3.1定义: 3.2案例 3.3自定义指令全局写法 1,局部过滤器 1.1定义: Vue.js ...
- Vue自定义指令详解
一.为什么需要自定义指令? 因为vue是MVVM模式,只需要关注于数据和业务逻辑,不需要关注DOM的操作,但是有时候面对一些特殊的业务需求时,需要进行DOM的操作,这个时候就需要进行自定义指令. 二. ...
- angular的自定义指令---详解
1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
- Vue高级语法(一) | 自定义指令详解
文章目录 Vue中自定义指令
- angular 定义对象_angular 自定义指令详解
一:指令的创建 创建module: var module1 = angular.module('module1',[]); angular.bootstrap(document.body,['modu ...
- java中Freemarker list指令详解
java Freemarker中list指令主要是进行迭代服务器端传递过来的List集合. 定义 <#list nameList as names> ${names} </#list ...
- AndroidManifest.xml文件配置教程及相关指令详解
AndroidManifest.xml 是每个android程序中必须的文件,它位于整个项目的根目录.我们每天都在使用这个文件,往里面配置程序运行所必要的组件,权限,以及一些相关信息.但是对于这个文件 ...
- arm-linux-ld中的参数,arm-linux-ld指令详解
arm-linux-ld指令详解 我们对每个c或者汇编文件进行单独编译,但是不去连接,生成很多.o 的文件,这些.o文件首先是分散的,我们首先要考虑的如何组合起来:其次,这些.o文件存在相互调用的关系 ...
最新文章
- css:z-index
- 【Flutter】遇见错误
- 【408预推免复习】计算机网络(谢希仁第七版)第二章——物理层
- oracle怎么捕获表上的DML语句(不包括select)语句)
- 如何降低SQL语句复杂度
- jsf按钮响应事件_如何从JSF获取JSON响应?
- 将数据、代码、栈放入不同的栈(8086)
- DRF数据验证+数据存储
- Web完整渗透测试实例(windows)
- 主打轻薄长续航搭载骁龙730 联想Z6发布 1899元起!
- SSM项目连接远程Linux服务器的mysql 启动tomcat卡在了 Initializing Spring root WebApplicationContext...
- 给大家推荐一本书啊啊~
- anime.js 图片位移动画_打造高大上的Canvas粒子动画
- Java项目集成永中文档在线预览
- 【ansible/ansible-tower】
- Linux查看电脑启动时间,几种常用的「查看Linux开机时间」的命令
- 将网络地图资源加载进Arcgis中
- Git vs GitHub –什么是版本控制及其工作方式?
- PI3体验之无线网AP模式设定及热点分享
- 解决 LaTeX 中的中文显示问题