twitter-bootstrap - How to hide a tab in Angular Bootstrap UI using ng-show/ng-hide

Question

I am using Angular Bootstrap UI to show a tabset. The script I include is ui-bootstrap-tpls-0.6.0.min.js and some template html files.

here is my markup:

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

here is my controller

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

This code does not work (the 2nd tab does not hide). What is the catch to apply ng attribute to a custom directive?

Answer 1

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

ng-hide="$parent.hideme"

Answer 2

第一个解决方案：同时使用 ng-show 和 ng-hide

<tabset>
<tab ng-show="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>

第二种解决方案：编写指令

.directive("hideTab", function() {
    return function(scope, elm, attrs) {
        scope.$watch(function() {
            $(elm).css("display", "none");
        });
    };
});