2

Angular Bootstrap UI を使用して、静的コンテンツを含むタブセットを表示しています。含めたブートストラップ スクリプトは ui-bootstrap-tpls-0.6.0.min.js です。

ここに私のマークアップがあります:

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

コントローラーはこちら

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

タブに ng-class が適用されていない場合、最初のタブが非表示で 2 番目のタブが表示される場合 ($scope.hideme = false)、最初のタブのコンテンツがアクティブに表示されることを除いて、うまく機能します。

ng-class を追加すると、angularjs でエラーが発生しました。エラー: [$parse:syntax] http://errors.angularjs.org/undefined/ $parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=16&p3=%7Bactive%3Afalse%7D%20%7Bactive %3A%20active%2C%20disabled%3A%20disabled%7D&p4=%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D

特定のタブをアクティブにする正しい方法 (または正しい構文) は何ですか?

4

1 に答える 1

1

表示/非表示のロジックを実行しないことをお勧めします。UI Bootstrap Tab のドキュメントには、ng-repeat でバインドして作成されたタブへのナビゲーションしか表示されないため、これにも不満を感じていました。

しかし、tabset ディレクティブでタブを $parentScope.tabs として参照できると思います。したがって、次を使用して簡単なナビゲーションが可能$parent.tabs[2].select()です。

<tabset>
  <tab heading="Tab 1">
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button>
  </tab>
  <tab heading="Tab 2">
    <p>Tab 2 contents</p>
  </tab>
  <tab heading="Tab 3">
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button>
  </tab>
</tabset>

それが役立つ場合、私は実用的なPlunkerの例を持っています。

于 2014-11-11T22:24:09.677 に答える