9

Angular Bootstrap UI を使用してタブセットを表示しています。含めるスクリプトは、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;
});

このコードは機能しません (2 番目のタブは非表示になりません)。カスタムディレクティブにng属性を適用するキャッチは何ですか?

4

2 に答える 2

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>

2 番目の解決策: ディレクティブを作成する

.directive("hideTab", function() {
    return function(scope, elm, attrs) {
        scope.$watch(function() {
            $(elm).css("display", "none");
        });
    };
});
于 2013-09-27T18:09:03.853 に答える