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都是必需的。
