Question

我正在使用Angular Bootstrap UI来显示带有静态内容的tabset。我包含的引导脚本是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，除了第一个选项卡隐藏和第二个选项卡显示（$ scope.hideme = false）时，它的效果很好，第一个选项卡的内容将显示为avtive。

如果我添加了ng-class，则会导致angularjs出错。错误：[$ parse：syntax] http://errors.angularjs.org/undefined/ $ parse / syntax？p0 =％7B＆amp; p1 = is％20an％20unexpected％20token＆amp; p2 = 16＆amp; p3 =％7Bactive％3Afalse％7D％20％7Bactive％ 3A％20active％2C％20disabled％3A％20disabled％7D＆安培; P4 =％7Bactive％3A％20active％2C％20disabled％3A％20disabled％7D

使特定标签处于活动状态的正确方法（或正确的语法）是什么？

Answer 1

我建议不要尝试显示/隐藏逻辑。我也对此感到沮丧，因为UI Bootstrap Tab documentation仅显示通过绑定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>

如果有帮助，我有一个working Plunker example。

如何使用静态内容在angularjs引导选项卡上设置活动

1 个答案: