AngularJs自定义指令详解（4） - transclude
transclude默认值为false，如果设置 transclude为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"> angular.module('app',[])
.directive('myDirective',function(){
return{
template:'<div>\
<h2>大标题</h2>\
</div>'
};
});
</script>
</head>
<body ng-app="app">
<div my-directive >
<ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
</div>
</body>
</html>
输出：
大标题
见鬼！小标题全不见了！审查元素看看：
魂淡，全丢没了！
没办法，出动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"> angular.module('app',[])
.directive('myDirective',function(){
return{
template:'<div>\
<h2>大标题</h2>\
<span ng-transclude></span>\
</div>',
transclude:true
};
});
</script>
</head>
<body ng-app="app">
<div my-directive >
<ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
</div>
</body>
</html>
输出：
大标题
- 小标题1
- 小标题2
审查元素看看：
再看看这个指令嵌套的例子：
<!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"> angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'E',
template:'<div>\
<h2>大标题</h2>\
<span ng-transclude></span>\
</div>',
transclude:true
};
})
.directive('myDirective2',function(){
return{
restrict:'E',
template:'<div>\
<h3>中标题</h3>\
<span ng-transclude></span>\
</div>',
transclude:true
};
});
</script>
</head>
<body ng-app="app">
<my-directive>
<my-directive2>
<ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
</my-directive2>
</my-directive>
</body>
</html>
输出:
大标题
中标题
- 小标题1
- 小标题2
可以尝试把指令里的transclude:true去掉，输出肯定有问题，所以两个指令里的transclude:true都是必需的。
AngularJs自定义指令详解（4） - transclude的更多相关文章
- 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自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- 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 ...
随机推荐
- redis高可用分布式集群
一,高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器.机房.CPU负载过高.内存溢出.自然灾害等不可预期的原 ...
- ftp
1.url的确定 string ftpServerIP = "29.184.249.98"; string path=new Uri("ftp://"+ftpS ...
- [ 转 ] scrapy 中解决 xpath 中的中文编码问题
1.问题描述: 实现定位<h2>品牌</h2>节点 brand_tag = sel.xpath("//h2[text()= '品牌']") 报错:Value ...
- CSS特殊性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 转载：NetBeans中如何运行GUI
这篇入门教程将教会您怎样创建一个简单的人机交互界面以及向其中添加简单 的后台功能. 特别地,我们将向您展示如何按 Swing 规范编写控制按钮和域代 码. 我们将会使用到布局管理.设计简单 GUI 界 ...
- HTML5 canvas beginPath() 方法
beginPath() 方法开始一条路径,或重置当前的路径.w3school上的解释! 路径是canvas里很重要的一个概念,刚开始学canvas的人对路径理解不是很深,他们在用canvas的时候会乱 ...
- 移动端bug整理，随时更新
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...
- 贼溜的更新Android-SDK的方法（亲测很好用）
启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口:在『Androi ...
- C语言正则表达式详解 regcomp() regexec() regfree()详解
标准的C和C++都不支持正则表达式,但有一些函数库可以辅助C/C++程序员完成这一功能,其中最著名的当数Philip Hazel的Perl-Compatible Regular Expression库 ...
- 初学c# -- 学习笔记（一）
初学c# -- 学习笔记(一) 学习C#了,参考许多资料,一步步学习.这一段学习ajax的工作原理,参照其他例子写了web版的群聊小程序,全部文件代码也就不到300行,很简单.使用时先输入用户名,点确 ...