transclude - 编译元素的内容，使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)
先看例子，index.JS代码：
Java代码
- var appModule = angular.module('app', []);
- appModule.directive('hello', function() {
- return {
- restrict: 'E',
- template: '<div>Hi there <span ng-transclude></span></div>',
- transclude: true
- };
- });
html
Java代码
- <html ng-app='app'>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <hello>
- <br/>
- <span>原始的内容，</span><br/>
- <span>还会在这里。</span>
- </hello>
- <hello>
- </hello>
- </body>
- <script type="text/javascript" src="../vendor/angular/angular.js"></script>
- <script type="text/javascript" src="app/index.js"></script>
- </html>
运行结果
firebug再看页面代码变成了
Java代码
- <hello>
- <div>Hi there
- <span ng-transclude="">
- <br/>
- <span>原始的内容，</span><br/>
- <span>还会在这里。</span>
- </span>
- </div>
- </hello>
- <hello <div="">Hi there
- <span ng-transclude="">
- </span>
- </hello>
