AngularJs自定义指令详解（9） - terminal
例子：
<!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:0,
transclude:true,
//terminal:true,
template:'<a href="http://angularjs.org/" ng-transclude></span>'
};
});
app.directive('d2',function() {
return{
priority:1,
link:function(scope){
console.log('d2链接函数被调用。');
scope.greeting = 'AngularJs';
}
};
});
</script>
</head>
<body ng-app="app">
<div d1 d2>Hello {{greeting}}!</div>
</body>
</html>
以上代码，暂时注释掉terminal:true
输出为：
把//去掉，再看，一片空白，审查元素看看：
d2的优先级已经设置得比d1高，从控制台也可以看出d2的链接函数被调用了。
但是
Hello {{greeting}}!
这个东西完全被丢弃了。官方文档的说法是：设置terminal为true的指令中，其模板里内嵌的指令和表达式都会被抛弃。上面例子d1指令被设置terminal为true之后，其模板里的ng-transclude指令也就无效了，结果可想而知。
再验证一下：
<!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{
//terminal:true,
template:'<a ng-href="http://angularjs.org/">Hello AngularJs!</a>'
};
}); </script>
</head>
<body ng-app="app">
<div d1></div>
</body>
</html>
输出：
审查元素看看：
AngularJs自动增加了href，所以超链接没问题。
去掉注释，输出：
超链接没了，只剩下文本！
审查元素看看：
href没有出现，可见ng-href没有执行，可以尝试更高优先级的指令，放在模板里，也不会被执行。
使用terminal选项的典型例子是AngularJs内置指令ngIf，在这里可以查看源码：https://github.com/angular/angular.js/blob/v1.3.16/src/ng/directive/ngIf.js#L3
AngularJs自定义指令详解（9） - terminal的更多相关文章
- 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自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...
- AngularJs自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解（3） - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- AngularJs自定义指令详解（10） - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
随机推荐
- ASP.NET生成WORD文档，服务器部署注意事项
网上转的,留查备用,我服务器装的office2007所以修改的是Microsoft Office word97 - 2003 文档这一个. ASP.NET生成WORD文档服务器部署注意事项 1.Asp ...
- myeclipse中将整块的代码所选中的代码左右移动的快捷键
myeclipse中将整块的代码/所选中的代码左右移动的快捷键选择你要移动的代码,TAB 右移ctrl+TAB左移(我的使用Shift+TAB管用)要是不使用快捷键就是:选中代码,点击右键选中Shif ...
- 学习 Linux，101: Linux 命令行
概述 本教程将简要介绍 bash shell 的一些主要特性,涵盖以下主题: 使用命令行与 shell 和命令交互 使用有效的命令和命令序列 定义.修改.引用和导出环境变量 访问命令历史和编辑工具 调 ...
- opencv嫁接vlfeat densesift
#include <opencv2/opencv.hpp> #include <iostream> extern "C" { #include <vl ...
- [JSP]解决Maven创建项目失败
来源:http://lovespss.blog.51cto.com/1907593/522225 新建Maven项目时遇到这个错误: Unable to create project from arc ...
- disconf系列【2】——解决zk部署情况为空的问题
如下图所示,在安装完成之后,发现zk(zookeeper)部署情况为空. 注:承接上篇,环境未发生改变. 1.解决zk没有启动的问题 查看disconf日志,发现zk没有启动. 实际情况是:zk已经启 ...
- Windows2008 R2 Enterprise离线安装IE10和VS2015过程记录
直接下载IE10,进行安装,提示需要联机下载更新: 在网上搜索到一篇文章(http://www.cnblogs.com/nbpowerboy/p/3383992.html),参考 以下载简体中文的Wi ...
- winform版弹框操作
公共弹框帮助类操作手册 1.说明 封装了对于winform操作的一些提示框,包括数据加载耗时的时候,提示数据正在加载,请稍后的提示窗体,动态提示给用户一些有用的信息.例如网吧里面续费提醒等. 2.操作 ...
- Servlet学习三——传输文件
最先在考虑传输文件时,想通过java写一个文件上传案例,传给Servlet,Servlet再保存至数据库中,但苦于一直没找到实例,听说Flex有实际的例子,就直接用Flex例子来测试了.本文的顺序为: ...
- ETL利器Kettle
ETL利器Kettle实战应用解析系列一[Kettle使用介绍] 本系列文章主要索引如下: 一.ETL利器Kettle实战应用解析系列一[Kettle使用介绍] 二.ETL利器Kettle实战应用解析 ...