angularjs uib-tab延迟加载

Question

I have a uib-tab with a heading an an ng-click method that loads the actual content by switching a boolean variable as follows.

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

This doesn't have consistent behaviour, some times the loadTab it's not executed at all and the tab is indeed been loaded, how can I solve this ? can I prevent the tab-content from been loaded and wait for the loadTab to execute first.

Answer 1

I found this solution how to lazy load Angular UI tabs and pills described in more detail here .

Load the script files into your application.

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

For each of the tabs in your tabset, you can now include a tab-include attribute that points to a partial which will be loaded into the tab pane when selected.

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