Question

我有一个带有标题和一个ng-click方法的uib-tab，它通过切换布尔变量来加载实际内容，如下所示。

<uib-tab class="height-full">
    <uib-tab-heading ng-click="vm.loadTab(2)">
                Rights
     </uib-tab-heading>
      <div>
      <div ng-if="vm.active_tab == 2" ng-include="'../partials/partialview.html'"></div>
      </div>
</uib-tab>

这并没有一致的行为，有时候loadTab根本没有执行，而且确实已经加载了tab，我该如何解决这个问题呢？我可以阻止加载标签内容并等待loadTab首先执行。

Answer 1

我发现此解决方案how to lazy load Angular UI tabs and pills更详细地介绍了here。

将脚本文件加载到您的应用程序中。

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-bootstrap-tabs-include/lib/angular-ui-bootstrap-tabs-include.js"></script>

对于选项卡集中的每个选项卡，您现在可以包含一个tab-include属性，该属性指向将在选中时加载到选项卡窗格中的部分。

<tabset>
    <tab heading="Foo" tab-include="'partials/foo.html'"></tab>
    <tab heading="Bar" tab-include="'partials/bar.html'"></tab>
</tabset>

angularjs uib-tab延迟加载

1 个答案: