Angular material single page application with multiple tabs data restriction

Question

I have an angular material application with multiple tabs. I am trying not to load all the data at once. I would like to load the data which is needed for the current tab only. What is the best way to achieve this.I have a controller for the whole page and directives with controllers for every tab. I tried to use onTabChanges event but the directives don't catch this event

HTML CODE

<div ng-controller="AdminController as ctrl" class="md-content" ng-cloak>
  <md-tabs flex md-dynamic-height md-border-bottom md-stretch-tabs="auto">
    <md-tab label="One" md-on-select="onTabChanges(1)">
      <tab-One></tab-One>
    </md-tab>
    <md-tab label="Two" md-on-select="onTabChanges(2)">
      <tab-Two></tab-Two>
    </md-tab>
    <md-tab label="Three" md-on-select="onTabChanges(3)">
      <tab-Three></tab-Three>
    </md-tab>
  </md-tabs>
</div>

JS CODE

<script>    
MyApp.controller('AdminController', function ($scope) {
  $scope.onTabChanges = function (currentTabIndex) {
    $scope.globalVar = currentTabIndex;
  }
}

MyApp.directive('tabOne', function ($location) {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: "../HtmlTemplates/one.html",
    controller: function ($scope, $http) {
      if ($scope.globaVar === 1) {
        Do something
      }
    }
  }
}
</script>

Vi100 Vi100 · Accepted Answer · 2016-12-08T10:45:11

Well, you don't need a directive for each tab content, unless this content template is used anywhere else in your app.

If this directives are who load the data, then each of them will do it when they get rendered, that is, when you enter the state. Anyway, if that happens, probably you haven't segmented properly the responsibilities of your components, directives are mostly to define templates.

Bring the logic that feches data out of these directives and put it on service. Then call this service in the onTabChange event, as you're doing.

Angular material single page application with multiple tabs data restriction

1 Answers