angular bootstrap 滚动标签问题

Question

bootstrap-scrolling-tabs 使用 angular-bootstrap 元素实现可滚动标签。

这是我的代码

 <div class="abc">
            <div class="panel panel-default abcd" >
                <div scrolling-tabs-wrapper>
                    <tabset>
                        <tab class="verticalText" heading="{{evi.evidenceIdentifier}}" ng-repeat="evi in examinationCtrl.getEvidences(examinationCtrl.currentDocument)"
                             select="examinationCtrl.selectEvidence(evi.sss)">
                            <div class="embed-responsive-pdf embed-responsive" ng-style="style()">
                                <div embed-src="{{examinationCtrl.urlForEvidence(evi.sss)}}"
                                     class="embed-responsive-item embed-progress"></div>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>

当我运行这个时，我遇到了以下错误。知道这有什么问题吗？

Controller 'tabset', required by directive 'tabContentTransclude', can't be found!

Answer 1

首先确保：UI Bootstrap 库 (ui.bootstrap.tabs) 是否添加为依赖项？

我在扩展 scrolling-tabs-wrapper 以动态添加新标签时遇到了同样的错误。只要我向底层数组添加一个选项卡，就会发生错误。我对错误原因的搜索使我来到这里。

我假设 examinationCtrl.getEvidences() 生成的数据不是静态的。尝试在您的控制器中提供一个静态选项卡数组，并在 tab/ng-repeat 元素中使用它，看看是否可行。

引发此错误的原因是 ElementsHandler 的方法 "moveTabContentOutsideScrollContainer" 中的以下语句：

$tabsContainer.find('.tab-content').appendTo($tabsContainer);

这会将带有“.tab-content”的元素移出范围，以便 UI Bootstrap 控制器 "tabset" 无法再找到它。为了解决这个问题，我在我的自定义滚动选项卡中添加了一个附加功能，以便在我更改初始选项卡数组时将其移回范围内。

angular bootstrap 滚动标签问题

angular bootstrap scrolling-tabs issues

scroll

angularjs

angular-ui-tabset