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