Angular 选项卡，防止所有内容默认加载，仅在单击选项卡时加载

Question

我已将 Angular UI Bootstrap 选项卡添加到我的页面，对于选项卡，我有一个具有不同视图和逻辑的自定义指令。

像这样

    <uib-tabset justified="true" class="tabs">
        <uib-tab>
          <uib-tab-heading>
              <i class="fa fa-home"></i> Home
          </uib-tab-heading>
          <routes-view selected-grid-type="home"></routes-view>
        </uib-tab>
        <uib-tab>
          <uib-tab-heading>
            <i class="fa fa-calendar"></i> Planned
          </uib-tab-heading>
          <test-view type="planned"></routes-view>
        </uib-tab>
        <uib-tab>
          <uib-tab-heading>
            <i class="fa fa-calendar-plus-o"></i> Actual
          </uib-tab-heading>
          <myplan-view type="actual"></routes-view>
        </uib-tab>
...

现在，当我的主页视图加载时，每个选项卡上的所有内容都会加载，这对于初始加载来说太多了。理想情况下，我只想在单击

时加载选项卡的内容

Answer 1

您可以在指令中调用一个函数来加载数据。当您单击 uib-tab

时，应该会发生此调用

<uib-tab select="homeRoute.loadHomeData()"> 
   <routes-view selected-grid-type="home" ng-model= 'homeRoute'></routes-view>
</uib-tab>

更新

在此处查看示例实现http://jsbin.com/vivaze/edit?html,output

Answer 2

我建议只使用 ng-if 来呈现活动标签内容。 uib-tab 已经维护了 active 索引属性这将帮助我们有条件地呈现内容。

Plunker 演示：https://plnkr.co/edit/TZjYOD?p=preview

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.tabs = [{ //optional: for dynamic/data driven tabs
    heading: 'Home',
    template: 'home.html'
  }, {
    heading: 'About',
    template: 'about.html'
  }];
});

<div ng-app="plunker" ng-controller="MainCtrl" class="container">
  <h2>Example of loading content only for active uib-tab</h2>
  <uib-tabset active="activeTabIndex"><!-- activeTabIndex will be updated automatically by uib-tabset -->
    <uib-tab heading="Home">
      <div ng-if="activeTabIndex === 0"><!-- render only if this tab is active -->
        <div ng-include="'home.html'"></div>
      </div>
    </uib-tab>
    <uib-tab heading="About">
      <div ng-if="activeTabIndex === 1">
        <!--Some big content goes here...-->
        <h3>About page content</h3>
      </div>
    </uib-tab>
  </uib-tabset>
  <h2>Using ng-repeat</h2>
  <!--uib-tab can be used alongwith ng-repeat as well-->
  <uib-tabset active="activeTabIndex2">
    <uib-tab heading="{{tab.heading}}" ng-repeat="tab in tabs">
      <div ng-if="activeTabIndex2 === $index" ng-include="tab.template"></div>
    </uib-tab>
  </uib-tabset>
</div>

Angular 选项卡，防止所有内容默认加载，仅在单击选项卡时加载

Angular Tabs, prevent all content from default loading, only when tabs are clicked

tabs

angularjs

angular-ui-bootstrap