对话框中显示AngularJS Boostrap选项卡时，活动选项卡不显示任何内容

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>