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 ...
随机推荐
- asp.net MVC上传图片完整方法
图片上传 自动创建文件夹并重命名(带缩略图) 后台: [HttpPost] public ActionResult WanSell_UploadPicture(ProductGalleryModels ...
- 关于C语言里指针的基本概念
C是很强大的一门语言,然而C语言的强大并不是强大在他的语法和“.h”文件,而是指针. 对指针通用的认知都是:指针是指向内存地址的一个变量.对于这句话,我是这么理解的:核心有两点,第一个是“指向内 ...
- SE要有政治能力
不光是SE,任何人都需要政治能力. 那么,什么是政治能力?政治能力就是让周围的人跟你一起,一条心,完成你想干的事情的能力. 我们任何人,生活也好,工作也好,学习也好,都不是一个人孤单进行的,都是通过几 ...
- scala-尾递归
------------------------- by chenkh ----------------------------- 随笔记录什么是尾递归,为什么需要尾递归,尾递归show by exa ...
- MapReduce 过程分析
原文地址:http://blog.jobbole.com/81676/ 2.WordCount处理过程 上面给出了WordCount的设计思路和源码,但是没有深入细节,下面对WordCount进行更加 ...
- 正则表达式提取string 中的表名
简单版本: Regex reg = new Regex(@"(?i)\bfrom\b(?![^\[\]]*\])\s+(\[[^\[\]]+\]|\S+)"); MatchColl ...
- windbg学习---!thread和.thread
!thread扩展显示目标系统中线程包括ETHREAD块在内的摘要信息.该命令只能在内核模式调试下使用 !thread [-p] [-t] [Address [Flags]] -p 显示拥有该线程的进 ...
- c语言-链表VS数组
数组和链表的区别 数组是将元素在内存中连续存放,由于每个元素占用内存相同,可以通过下标迅速访问数组中任何元素.但是如果要在数组中增加一个元素,需要移动大量元素,在内存中空出一个元素的空间,然后将要 ...
- jquery EasyUI datagrid 的扩展
接触 easyui 半年,js学的不深.大神请路过. 直接扩展 添加方法: $.extend($.fn.datagrid.methods, { getSelectedIndex: function ( ...
- sscanf与正则表达式(转)
今天翻google reader的时候看到这样一篇文章,介绍的是sscanf的高级用法.直到今天我才知道sscanf是可以直接用正则表达式的,惭愧. 在msdn中sscanf的声明如下 int ssc ...