AngularJS Bootstrap 选项卡在对话框中显示时不显示活动选项卡的任何内容

Question

我的 showDialog 中有很多选项卡，当我将 tab_2 设置为活动状态时，内容不显示任何内容，这很奇怪。

 <div class="portlet-body">
    <div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
        <ul class="nav nav-tabs nav-tabs-lg">
            <li id="li_tab_1">
                <a data-toggle="tab" href="#" data-target="#tab_1">
                    MyTab1
                </a>
            </li>
            <li id="li_tab_2" class="active">
                <a data-toggle="tab" href="#" data-target="#tab_2">
                    MyTab2
                </a>
            </li>
           
          
        </ul>
        <div class="tab-content">
            <div id="tab_1" class="tab-pane fade meter-tabs-height">   
                <div ng-include="'mytab1.html'"></div>         
            </div>
            <div id="tab_2" class="tab-pane fade in meter-tabs-height" active>

                <div ng-include="'mytab2.html'"></div>    
               
            </div>
       </div>
    </div>
</div>

当我第一次进入对话框时，对话框显示 MyTab2 没有任何内容。但是，当我点击 MyTab1 然后重新点击 MyTab2 时，内容出现了。

这是怎么发生的，我该如何处理这个问题？谢谢。

Answer 1

我的代码有误，只需添加class="active"即可解决。

替换

<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
    <div ng-include="'mytab2.html'"></div>                
</div>

与

<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
    <div ng-include="'mytab2.html'"></div>                
</div>

AngularJS Bootstrap 选项卡在对话框中显示时不显示活动选项卡的任何内容

AngularJS Boostrap tabs does not show anything for active tab when it is shown in dialog

tabs

angularjs

bootstrap-modal

twitter-bootstrap-3