AngularJs自定义指令详解（8） - priority
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 ...
随机推荐
- Debug 常见问题总结（持续更新）
2016-9-24 1.for循环变量做参数一定要小心,嵌套一个for变量不要用同一个. 2.字符串处理要打好下标的草稿,不然很容易搞混.(方法待讨论). 3.整形比较比较容易忽略=的问题 ,> ...
- linux系统下的软连接与硬链接
前几天在linux系统下安装mongoDB,然后运行脚本导入数据的时候遇到了链接库查询不到的情况,如图 1所示.当时是通过创建软连接的方式解决的这个问题.虽然,通过网上的教程解决了这个问题,但是对于软 ...
- python容器类型：列表，字典，集合等
容器的概念我是从C++的STL中学到的 什么是容器? 容器是用来存储和组织其他对象的对象. 也就是说容器里面可以放很多东西,这些东西可以是字符串,可以是整数,可以是自定义类型,然后把这些东西有组织的存 ...
- js判断页面是pc打开还是手机打开
<script type="text/javascript"> function browserRedirect() { var sUserAgent = naviga ...
- 【转载】[C#]Log4net中的RollingFileAppender解析
Log4日志组件的应用确实简单实用,在比较了企业库和Log4的日志功能后,个人觉得Log4的功能更加强大点.补充说明下,我使用的企业库是2.0版本,Log4net是1.2.1版本的. 在Log4net ...
- GPL 和BSD和Apache
开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别<ignore_js_op> 以下是上述协议的简单介绍:BSD开源协议BSD开源协议是一个给于使用者很大自由的 ...
- 配置Nginx支持SSL SNI（一个IP绑定多个证书) 以及Haproxy实现多域名证书
概述 传统的每个SSL证书签发,每个证书都需要独立ip,假如你编译openssl和nginx时候开启TLS SNI (Server Name Identification) 支持,这样你可以安装多个S ...
- [vivado系列]Zynq开发常用文档
时间:2016.06.13 目的:阶段性总结学习的策略 ------------------------------------------------------------------------ ...
- zepto的touch模块解决click延迟300ms问题以及点透问题的详解
大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...
- javascript照片墙效果
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...