角度材质选项卡仅显示第一个选项卡

Question

为什么 md-tabs 只显示第一个选项卡？单击选项卡区域后，将显示其余部分。

第一个标签如下所示：

点击标签区域后：

我的代码如下所示：

<md-tabs md-dynamic-height md-border-bottom>
    <md-tab label="Home"></md-tab>
    <md-tab label="Profile"></md-tab>
    <md-tab label="Messages"></md-tab>
</md-tabs>

我故意将选项卡的内容留空，因为我想摆脱所描述的过渡动画。

其中一个问题可能是选项卡位于 bootstrap dropdown menu。

谢谢你的想法！

编辑

我刚刚发现在 md-menu.

中使用选项卡时即使没有 bootstrap 也会出现问题

Answer 1

你解决了吗？

除了我的 angular 选项卡位于 bootstrap 的模式之外，我遇到了同样的问题。当我点击一个按钮来切换模式时，它只显示第一个选项卡，直到我点击它。

经过一些测试后，我似乎可以通过使用 ng-show 隐藏 angular 选项卡并在少量延迟后显示它来解决。

<button ng-click="controller.showTabs()">Show Tab</button>


<md-tabs md-dynamic-height md-border-bottom ng-show="show_tab">
    <md-tab label="Home"></md-tab>
    <md-tab label="Profile"></md-tab>
    <md-tab label="Messages"></md-tab>
</md-tabs>

当用户点击下拉/按钮切换模式时控制器的功能：

this.showTabs = 
function()
{
    //250ms delay
    $timeout(function()
    {
        $scope.show_tab = true;
    },250);
}

角度材质选项卡仅显示第一个选项卡

AngularMaterial Tabs showing only 1st tab

tabs

twitter-bootstrap

angularjs

angular-material

dropdown