javascript - 如何隐藏自定义指令

Question

我正在尝试使用自定义指令来实现选项卡。这是选项卡的代码:

<section ng-controller="tabController as tab">
    <ul class="nav nav-pills">
        <li ng-class="{active: tab.isSelected(1)}"> <a href ng-click="tab.selectTab(1)"> Hosts </a></li>
        <li ng-class="{active: tab.isSelected(2)}"> <a href ng-click="tab.selectTab(2)"> Instances </a></li>
        <li ng-class="{active: tab.isSelected(3)}"> <a href ng-click="tab.selectTab(3)"> Clusters </a></li>
    </ul>
</section>
<host-panel ng-show="tab.isSelected(1)"></host-panel>

据我所知，选项卡切换正确，因此问题可能不在于选项卡 Controller 。但是，当我在自定义指令上使用以下行时，不会显示任何内容:

<host-panel ng-show="tab.isSelected(1)"></host-panel>

事实上，将整个事物包装在其他东西中也不起作用。

<div ng-show="tab.isSelected(1)"><host-panel></host-panel>

这是主机面板指令:

app.directive
('hostPanel',
    function()
    {
        return{
            restrict: 'E',
            templateUrl: 'partials/hosttable.html',
            controller: 'hostTableController',
            controllerAs: 'table'
        };

    }
);

这是html文件

<div class = "panel panel-default">
    <table align = "center" class = "table table-striped table-hover" style="max-width: 1600px" ng-controller = "hostTableController as table">
        <tr class = "info">
            <td>ID: </td>
            <td>Name: </td>
            <td>isVirtual: </td>
            <td>OS: </td>
            <td>OS Version: </td>
            <td>Environment ID: </td>
            <td>Operations: </td>
        </tr>
        <tr class = "active" ng-repeat = "host in hosts | orderBy: 'id'">
            <td>{{host.id}}</td>
            <td>{{host.name}}</td>
            <td>{{host.isVirtual}}</td>
            <td>{{host.os}}</td>
            <td>{{host.os_version}}</td>
            <td>{{host.environment_id}}</td>
            <td><div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-cog" aria-hidden="true"> Edit </span></button>
                <button type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-trash" aria-hidden="true"> Delete </span></button>
            </div>
            </td>
        </tr>
    </table>
</div>

那么有没有办法让整个面板隐藏起来呢？

Answer 1

事实证明我真是愚蠢至极。

<host-panel ng-show="tab.isSelected(1)"></host-panel>

应该进入带有 Controller 的section标签内。