angularjs指令参数transclude

angularjs指令参数transclude

transclude翻译为嵌入，和之前看到的vue中的slots作用差不多，目的是将指令元素的子内容嵌入到指令的模板中

定义指令

<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>  

使用

下面会将div的内容嵌入带指令的模板中显示而达到自定义列表的效果，我们用的弹出层对话框就是这样实现的

<sidebox>
    <div sideboxtitle="Links">
        <ul>
            <li>First link</li>
            <li>Second link</li>
        </ul>
    </div>
</sidebox>

<sidebox>
    <div sideboxtitle="TagCloud">
        <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>
</sidebox>