Question

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

像这样的东西

<activity
    android:noHistory="true"
    android:screenOrientation="portrait"
    android:name=".activities.FbLoginActivity">
</activity>

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

时加载标签的内容

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

＆＃13;

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'
  }];
});

＆＃13;

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

＆＃13;

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

2 个答案: