Question

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

我想制作一个使用角度ng-view的简单标签导航非常类似于AngularJS主页上的示例here。（在创建组件部分）。

我希望有常规标签，但点击后，ng-view将启动并管理模板插入。

这里有一些代码：

index.html

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

script.js:

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
        };
    })

我的主要困惑是ng-transclude。当我不想要标签内容时，我不明白为什么我需要一个被转换的div。上面的代码有效，除了我不喜欢我需要隐藏div的部分（使用display: none;）。我认为这不是他们正确的方法，如果有人可以向我解释这些东西，我真的很感激。

AngularJS的常规标签，关于ng-transclude

0 个答案: