priority

默认值为0.

当一个元素上声明两个指令，而且它们的priority一样，谁先被调用？这个需要分情况讲。下面先给个例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.         var app = angular.module("app", []);
  10.         app.directive('d1',function() {
  11.             return{
  12.                 link: function (scope) {
  13.                     scope.greeting += 'World ';
  14.                 }
  15.             };
  16.         }).directive('d2',function() {
  17.             return{
  18.  
  19.                 link: function (scope) {
  20.                     scope.greeting += 'AngularJs ';
  21.                 }
  22.             };
  23.         });
  24.     </script>
  25. </head>
  26. <body ng-app="app">
  27. <div ng-init="greeting='Hello '" d1 d2>{{greeting}}!</div>
  28. </body>
  29. </html>

输出：

Hello AngularJs World !

可见ng-init先行一步，把greeting赋值为'Hello '，然后是指令d2的链接函数，最后是d1

试一下，修改DOM中声明的次序：

  1. <div d2 d1 ng-init="greeting='Hello '">{{greeting}}!</div>

没用，输出不变。

再试一下，修改JavaScript中声明的次序：

  1.         app.directive('d2',function() {
  2.             return{
  3.                 link: function (scope) {
  4.                     scope.greeting += 'World ';
  5.                 }
  6.             };
  7.         }).directive('d1',function() {
  8.             return{
  9.  
  10.                 link: function (scope) {
  11.                     scope.greeting += 'AngularJs ';
  12.                 }
  13.             };
  14.         });

这下变了！输出为：

Hello World AngularJs !

魂淡，AngularJs居然使用字母顺序来确定链接函数谁先被调用！不信？试试把d1改名为e1，输出就会变回：

Hello AngularJs World !

这时候我们不得不使用priority了！否则代码没法看了：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.         var app = angular.module("app", []);
  10.         app.directive('d1',function() {
  11.             return{
  12.                 link: function (scope) {
  13.                     scope.greeting += 'World ';
  14.                 }
  15.             };
  16.         });
  17.         app.directive('d2',function() {
  18.             return{
  19.                 priority:1,
  20.                 link: function (scope) {
  21.                     scope.greeting += 'AngularJs ';
  22.                 }
  23.             };
  24.         });
  25.     </script>
  26. </head>
  27. <body ng-app="app">
  28. <div d1 d2 ng-init="greeting='Hello '">{{greeting}}!</div>
  29. </body>
  30. </html>

输出:

Hello World AngularJs !

奇怪的是d2的优先级更高，为什么还是先调用了d1的链接函数？

原来我们书写链接函数的方式是一个简略方式，实际上是一个postLink：

  1. link: function postLink( ... ) { ... }

详细的写法是这样的：

  1.   link: {
  2.    pre: function preLink(scope, iElement, iAttrs, controller) { ... },
  3.    post: function postLink(scope, iElement, iAttrs, controller) { ... }
  1. }

preLink的执行次序是由高（优先级）至低（优先级）。

postLink的执行次序是由低至高。

验证一下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.         var app = angular.module("app", []);
  10.         app.directive('d1',function() {
  11.             return{
  12.                 link: {
  13.                     pre: function (scope) {
  14.                         scope.greeting += 'World ';
  15.                     }
  16.                 }
  17.             };
  18.         });
  19.         app.directive('d2',function() {
  20.             return{
  21.                 priority:1,
  22.                 link: {
  23.                     pre: function (scope) {
  24.                         scope.greeting += 'AngularJs ';
  25.                     }
  26.                 }
  27.             };
  28.         });
  29.     </script>
  30. </head>
  31. <body ng-app="app">
  32. <div d1 d2 ng-init="greeting='Hello '">{{greeting}}!</div>
  33. </body>
  34. </html>

输出：

Hello AngularJs World !

至于何为postLink和preLink以及它们的区别在哪，后面再说。

下面看看有模板输出的情况：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.         var app = angular.module("app", []);
  10.         app.directive('d1',function() {
  11.             return{
  12.                 priority:1,
  13.                 template:'World'
  14.             };
  15.         });
  16.         app.directive('d2',function() {
  17.             return{
  18.                 priority:0,
  19.                 template:'AngularJs'
  20.             };
  21.         });
  22.     </script>
  23. </head>
  24. <body ng-app="app">
  25. <div d1 d2></div>
  26. </body>
  27. </html>

以上代码，d1、d2都有模板，而因为d1的优先级更高，所以最终显示的是World，而d2的模板被完全无视了。

可以改一下d2的优先级为2，试试输出是否改变。

AngularJs自定义指令详解（8） - priority的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解（10） - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  4. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  5. AngularJs自定义指令详解（9） - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  7. AngularJs自定义指令详解（7） - multiElement

    multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...

  8. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  9. AngularJs自定义指令详解（4） - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

随机推荐

  1. NK3C程序资源占用分析

    1.程序放在一个Tomcat下最低配置推荐:最大堆:768M,最大PermGen:160M(-Xmx768m -XX:MaxPermSize=160m) 2.机器最低配置推荐:最小内存2G 3.正式运 ...

  2. leetcode6:Zigzag Conversion@Python

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  3. SQL Server 2012 AlwaysOn 亲身实历记

    亲身经历的一个项目,老板忽然提出,对数据库的负债要实施分流,来个数据库一个负责读,而另一个负责写,后台是需要同步两个数据库的状态.找了很多的资料,发现新版的alwayson可以实现这个功能. 研读了a ...

  4. Python自动化 【第十八篇】：JavaScript 正则表达式及Django初识

    本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  5. 将Linux命令的结果作为下一个命令的参数

    查询所有的pid并杀死. jps -l | grep bdcsc2-native-demo | awk '{print $1}' | xargs kill -9 KISS:keep it short ...

  6. 封装、调用ajax

    1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...

  7. Codeigniter

    最近准备接手改进一个别人用Codeigniter写的项目,虽然之前也有用过CI,但是是完全按着自己的意思写的,没按CI的一些套路.用在公众的项目,最好还是按框架规范来,所以还是总结一下,免得以后别人再 ...

  8. DevExpress.XtraGrid.GridControl 实现自定义tooltip

    DevExpress.XtraGrid.GridControl 控件默认的tooltip显示的每一个单元格的文本值,但是实际工作中会出现各种需求.我这里就有一个列是折扣率显示的值是0-1之间的两位小数 ...

  9. Jenkins+Jmeter+Ant接口持续集成

    修改时间 修改内容 修改人 2016.5.22 创建 刘永志 2016.6.15 完成 刘永志 前言: 为什么要用Jmeter做接口测试: 当选择这套方案的时候,很多人会问,为什么选择Jmeter做C ...

  10. mysql 允许远程访问

    原来装mysql数据库的时候就想,这个只要在本地访问就可以了,没有必要让远程访问.可是,今天想把数据放到远程的机器上,却发现,不是简单的将sql语句(指导出的语句)执行一遍就行了,对于那些自增的字段, ...