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

Question

I have added Angular UI Bootstrap Tabs to my page, and for tab I have a custom directive with different views and logic.

Something like this

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

Now when my home page view loads all content on each tabs gets loaded, and this is too much for initial load. Ideally I only want to load the content of the tab when it is click on

Sasikumar D.R. · Accepted Answer · 2015-11-28 04:08:26Z

2

You could call a function inside your directive to load data. This call should happen when you click on uib-tab

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

Update

See Sample implementation here http://jsbin.com/vivaze/edit?html,output

edited Nov 28, 2015 at 4:08

answered Nov 27, 2015 at 19:12

Sasikumar D.R.

8621 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StevieB Over a year ago

in your example what does homeRoute refer to ? Is this a controller of the directive or an object within the controller for the directive or...?

Sasikumar D.R. Over a year ago

it is two way bind object. inside directive, you should define loadHomeData function to this object so that you could call it on tab selection

Sasikumar D.R. Over a year ago

Okay. Give me sometime. Not in front of system. I did something like this in one of my works.

Amitesh · Accepted Answer · 2018-06-19 06:36:38Z

I will recommend to simply use ng-if to render the active tab content. uib-tab already maintains active index property which will help us to render the content conditionally.

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related