angularjs uib-tab延迟加载

Question

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

<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它根本没有执行，标签确实被加载了，我怎么解决这个问题呢？是否可以阻止加载选项卡内容，并等待loadTab首先执行。

Answer 1

我在更详细的here中找到了how to lazy load Angular UI tabs and pills描述的解决方案。

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

<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>