AngularJS参数transclude

    transclude是一个可选的参数。如果设置了,其值必须为true,它的默认值是false。

嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常 好的配合。使用嵌入也会很好地扩充我们的工具集,特别是在创建可以在团队、项目、AngularJS 社区之间共享的HTML代码片段时。嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏。

    我们可以将整个模板,包括其中的指令通过嵌入全部传入一个指令中。这样做可以将任意内 容和作用域传递给指令。transclude参数就是用来实现这个目的的,指令的内部可以访问外部 指令的作用域,并且模板也可以访问外部的作用域对象。

    为了将作用域传递进去,scope参数的值必须通过{}或true设置成隔离作用域。如果没有设 置scope参数,那么指令内部的作用域将被设置为传入模板的作用域。

    嵌入允许指令的使用者方便地提供自己的HTML模板,其中可以包含独特的状态和行为,并对指令的各方面进行自定义。下面一起来实现个小例子,创建一个可以被自定义的可复用指令。

    我们来创建一个可以复用的侧边栏,同WordPress博客的侧边栏很相似。我们希望可以保持CSS样式的一致性,同时又希望可以在复用时尽量少写HTML代码。

    例如,假设我们想创建一个包括标题和少量HTML内容的侧边栏,如下所示 

<div sidebox title="Links">
         <ul>
             <li>First link</li>
             <li>Second link</li>
         </ul>
</div>
<script>
angular.module('myApp', [])
.directive('sidebox', function() {
    return {
        restrict: 'EA',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div class="sidebox">\
            <div class="content">\
                <h2 class="header">{{ title }}</h2>\
                <span class="content" ng-transclude>\
                </span>\
            </div>\
        </div>'
}; });
</script>

 这段代码告诉AngularJS编译器,将它从DOM元素中获取的内容放到它发现ng-transclude 指令的地方。

<div sideboxtitle="Links">
         <ul>
             <li>First link</li>
             <li>Second link</li>
         </ul>
</div>
<div sideboxtitle="TagCloud"> 11
<div class="tagcloud">
    <a href="">Graphics</a>
    <a href="">AngularJS</a>
    <a href="">D3</a>
    <a href="">Front-end</a>
    <a href="">Startup</a>
</div>
</div>