如何使用ng-show/ng-hide隐藏Angular Bootstrap UI中的选项卡

Question

我正在使用Angular Bootstrap UI来显示一个tabset.我包含的脚本是ui-bootstrap-tpls-0.6.0.min.js和一些模板html文件.

这是我的标记:

<tabset>
    <tab ng-hide="!hideme">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="hideme">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

这是我的控制器

function myController($scope) {
    $scope.hideme = true;
});

此代码不起作用(第二个选项卡不隐藏).将ng属性应用于自定义指令的问题是什么？

Answer 1

该tab指令创建了一个新的范围,因此需要使用它$parent来访问该模型.尝试

ng-hide="$parent.hideme"