Javascript AngularJS的常规选项卡，关于ng transclude

我是AngularJS的新手，我有一些问题

我想制作一个简单的选项卡导航，它将使用角度ng视图 很像AngularJS主页上的示例。在“创建组件”部分中

我希望有常规选项卡，但单击时，ng视图将启动并管理模板插入

下面是一些代码：

index.html：

我的主要困惑点是ng transclude。我不明白为什么我需要一个转置div，而我根本不想要选项卡内容。上面的代码可以工作，除了我不喜欢需要用display:none；隐藏div的部分；。我认为这不是正确的方式，如果有人能向我解释这件事，我将非常感激

...
<tabs class="list-group">
    <pane ng-repeat="pane in panes" class="list-group-item" title="{{pane.title}}" target="{{pane.target}}">I am a pane</pane>
</tabs>
...

angular.module('components', ['ngRoute'])

    .directive('tabs', function() {
        return {
            restrict: 'E',
            transclude: '.tabbable',
            scope: {},
            controller: function($scope, $location, $element) {
                var panes = $scope.panes = [];

                /**
                 * TODO
                 */
                $scope.select = this.select = function(pane) {
                    angular.forEach(panes, function(pane) {
                        pane.selected = false;
                    });
                    pane.selected = true;
                }

                this.addPane = function(pane) {
                    panes.push(pane);
                }

                /* Set active pane */
                this.currentPane = $location.path().slice(1);
            },
            /* TODO: get rid of display: none; */
            template:
                '<div class="tabbable">' +
                    '<ul class="nav nav-tabs">' +
                        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                            '<a href="#{{pane.target}}" ng-click="select(pane)">{{pane.title}}</a>' +
                        '</li>' +
                    '</ul>' +
                    '<div style="display: none;" ng-transclude></div>' +
                '</div>',
            replace: true
        };
    })

    .directive('pane', function() {
        return {
            require: '^tabs',
            restrict: 'E',
            scope: { title: '@', target: '@', active: '@active' },
            link: function(scope, element, attrs, tabsCtrl) {
                if (scope.target == tabsCtrl.currentPane) {
                    tabsCtrl.select(scope);
                }
                tabsCtrl.addPane(scope);
            },
            template:
                '<div class="tab-pane" ng-class="{active: selected}"></div>',
            replace: true
        };
    })