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的更多相关文章

  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. cs11_adventure c++_lab1

    exercise1.cc #include <iostream> #include <vector> #include <stdlib.h> #include &l ...

  2. 怎么解决svn清理失败且路径显示乱码问题

    http://jingyan.baidu.com/article/295430f1d728830c7e0050f9.html 上面这个网址是百度经验给的方法,我也是参照这个方式解决了问题,虽然是解决了 ...

  3. ubuntu安装mysql-python出错,EnvironmentError: mysql_config not found

    安装mysql-python包出错 Downloading MySQL-python-.zip (108kB) % |████████████████████████████████| 112kB 1 ...

  4. eclipse 查看变量或方法在什么地方被调用的快捷键

    选中方法名,点鼠标右键,菜单里有个”打开调用层次结构 ( Open Call Hierarchy )“,选中或者按下快捷键Ctrl+Alt+H,就在下面栏目里能看到调用的树形结构了. 或者: 1.双击 ...

  5. 42、lucene和机器学习进行全文搜索,并排序

    package com.lucene.test; import java.io.BufferedInputStream; import java.io.File; import java.io.Fil ...

  6. setTimeout 和 setInterval

    设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout(" ...

  7. prolog 阶段总结

    http://blog.csdn.net/mwsong/article/details/1766382   到现在为止,我们已经对Prolog有了一个基本的了解,现在有必要对我们所学过的知识做一个系统 ...

  8. CMD打包文件,解压文件

    压缩%ProgramFiles%\Winrar\rar a c:\123.rar c:\123解压%ProgramFiles%Winrar\unrar.exe x c:\sp\sp.rar c:\sp

  9. Linux文件查找

    Linux下查找文件的命令有两个; locate: find : locate这个命令对其生成的数据库进行遍历(生成数据库的命令:updatedb),这一特性决定了查 找文件速度很快,但是locate ...

  10. MFC 获取图像的大小

    // 获致图像的大小 int CCImageDialog::GetImageSize(CSize& size, CString filename) { CImage image; image. ...