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>

巴特西

angularjs指令参数transclude

angularjs指令参数transclude

定义指令

使用

最新文章

热门文章