priority
默认值为0.
当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲。下面先给个例子:
<!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 app = angular.module("app", []);
app.directive('d1',function() {
return{
link: function (scope) {
scope.greeting += 'World ';
}
};
}).directive('d2',function() {
return{ link: function (scope) {
scope.greeting += 'AngularJs ';
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-init="greeting='Hello '" d1 d2>{{greeting}}!</div>
</body>
</html>
输出:
Hello AngularJs World !
可见ng-init先行一步,把greeting赋值为'Hello ',然后是指令d2的链接函数,最后是d1
试一下,修改DOM中声明的次序:
<div d2 d1 ng-init="greeting='Hello '">{{greeting}}!</div>
没用,输出不变。
再试一下,修改JavaScript中声明的次序:
app.directive('d2',function() {
return{
link: function (scope) {
scope.greeting += 'World ';
}
};
}).directive('d1',function() {
return{ link: function (scope) {
scope.greeting += 'AngularJs ';
}
};
});
这下变了!输出为:
Hello World AngularJs !
魂淡,AngularJs居然使用字母顺序来确定链接函数谁先被调用!不信?试试把d1改名为e1,输出就会变回:
Hello AngularJs World !
这时候我们不得不使用priority了!否则代码没法看了:
<!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 app = angular.module("app", []);
app.directive('d1',function() {
return{
link: function (scope) {
scope.greeting += 'World ';
}
};
});
app.directive('d2',function() {
return{
priority:1,
link: function (scope) {
scope.greeting += 'AngularJs ';
}
};
});
</script>
</head>
<body ng-app="app">
<div d1 d2 ng-init="greeting='Hello '">{{greeting}}!</div>
</body>
</html>
输出:
Hello World AngularJs !
奇怪的是d2的优先级更高,为什么还是先调用了d1的链接函数?
原来我们书写链接函数的方式是一个简略方式,实际上是一个postLink:
link: function postLink( ... ) { ... }
详细的写法是这样的:
link: {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
preLink的执行次序是由高(优先级)至低(优先级)。
postLink的执行次序是由低至高。
验证一下:
<!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 app = angular.module("app", []);
app.directive('d1',function() {
return{
link: {
pre: function (scope) {
scope.greeting += 'World ';
}
}
};
});
app.directive('d2',function() {
return{
priority:1,
link: {
pre: function (scope) {
scope.greeting += 'AngularJs ';
}
}
};
});
</script>
</head>
<body ng-app="app">
<div d1 d2 ng-init="greeting='Hello '">{{greeting}}!</div>
</body>
</html>
输出:
Hello AngularJs World !
至于何为postLink和preLink以及它们的区别在哪,后面再说。
下面看看有模板输出的情况:
<!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 app = angular.module("app", []);
app.directive('d1',function() {
return{
priority:1,
template:'World'
};
});
app.directive('d2',function() {
return{
priority:0,
template:'AngularJs'
};
});
</script>
</head>
<body ng-app="app">
<div d1 d2></div>
</body>
</html>
以上代码,d1、d2都有模板,而因为d1的优先级更高,所以最终显示的是World,而d2的模板被完全无视了。
可以改一下d2的优先级为2,试试输出是否改变。
AngularJs自定义指令详解(8) - priority的更多相关文章
-
AngularJs自定义指令详解(1) - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
-
AngularJs自定义指令详解(6) - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
-
AngularJs自定义指令详解(10) - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
-
AngularJs自定义指令详解(2) - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
-
AngularJs自定义指令详解(9) - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
-
AngularJs自定义指令详解(5) - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
-
AngularJs自定义指令详解(7) - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
-
AngularJs自定义指令详解(3) - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
-
AngularJs自定义指令详解(4) - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
随机推荐
-
如何在CentOS/RHEL &; Fedora上安装MongoDB 3.2
MongoDB(名称取自"huMONGOus")是一个有着全面灵活的索引支持和丰富的查询的数据库.MongoDB通过GridFS提供强大的媒体存储.点击这里获取MongoDB的更多 ...
-
Mac wifi已打开但尚未连接到网络
把网络偏好设置 里面的询问新网络 关闭了 然后 重启电脑 试一下 应该就可以了
-
【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
出于项目需要,我们的Qt程序需要运行在 1. Windows/Linux-X86平台(CPU为常见的桌面级CPU如G3220.I3等): 2. Windows/Linux-X86低功耗平台(CPU为I ...
-
html-5 --html5教程article、footer、header、nav、section使用
header header元素是一种具有引导和导航作用的辅助元素.通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格.搜索表单或 ...
-
mysql_sql语句之美
无线地址及数量统计 单个用户无线登录信息统计
-
java 读取固定目录下的文件(和上篇差点儿相同)
package gao.org; import java.io.FileNotFoundException; import java.io.IOException; import java.io.Fi ...
-
OCA读书笔记(9) - 管理数据同步
9.Managing Data Concurrency 描述锁机制以及oracle如何管理数据一致性监控和解决锁冲突 管理数据的并发--管理锁数据的不一致:脏读更改丢失幻影读 脏读:数据是指事务T2修 ...
-
Python内置数据类型总结
python的核心数据类型:(很多语言之提供了数字,字符串,文件数据类型,其他形式的数据类型都以标准库的形式表示 也就是用之前需要import ) ,但是python有很多都是内置的,不需要impor ...
-
[TJOI 2013]单词
Description 题库链接 给出一篇文章的所有单词,询问每个单词出现的次数. 单词总长 \(\leq 10^6\) Solution 算是 \(AC\) 自动机的板子,注意拼成文章的时候要在单词 ...
-
用户认证:基于jwt和session的区别和优缺点
背景知识: Authentication和Authorization的区别: Authentication:用户认证,指的是验证用户的身份,例如你希望以小A的身份登录,那么应用程序需要通过用户名和密码 ...