Question

我对使用Angular和AngularStrap指令有些新意。我需要使用带有静态标记的tab指令，例如：

<div data-fade="1" bs-tabs>
  <div data-title="'Home'"><p>Static tab content A</p></div>
  <div data-title="'Profile'"><p>Static tab content B</p></div>
</div>

在页面的另一部分，我只想在选择第一个标签时显示div。 div不是选项卡的一部分，但是在同一个整体控制器中。如何根据所选标签显示/隐藏此div？

这样的东西？

<div ng-show="???? active tab stuff here ????">Home tab is selected</div>

感谢您的帮助。

Answer 1

如AngularStrap页面上的example所示，有效点击存储在

中

tabs.activeTab

因此，您可以使用此属性有条件地显示其他类似的内容

<div ng-show="tabs.activeTab == 0">The first tab is active</div>

<强>更新

即使使用非对象选项卡，您也可以将模型绑定到bs-tabs以存储活动ID，如下所示：

<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>

这是更新的plnkr。 （单击第3个选项卡，然后看到“测试”文本出现）

Answer 2

我现在发现有点黑客可以解决这个问题。这似乎不是最好的方法，所以如果有人有更好的想法，请分享。

我意识到bsTabs指令正在为每个选项卡创建数据切换属性。通过观察数据切换显示事件，我能够识别标签更改并显示div。控制器代码如下所示：

    $scope.HomeTabSelected = true;

    function watchTab() {
        $('a[data-toggle="tab"]').on('shown', function (e) {
            $scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
        })
    }

    setTimeout(watchTab, 2000);  // setTimeout necessary to allow directive to render

并且HTML div使用ng-show。

    <div ng-show="HomeTabSelected">Home tab is selected</div>

如何获得AngularStrap活动标签？

2 个答案: