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>