Separate controller per tab in angular-material w/ ui-router

Question

I'm trying to implement my md-tabs so each md-tab is a separate state using angular-material. My current markup looks like this:

  md-tabs.is-flex.auto-flex(selected="selectedIndex",layout="vertical")
     md-tab(on-select="selectTab(0)",label="Player",ui-sref="state1")
        div.tab(ui-view)

     md-tab(on-select="selectTab(1)",label="Map",ui-sref="state2")
        div.tab(ui-view)

I don't think this is valid markup for ui-router, though. Is it possible to do this with the current version of angular-material and ui-router?

James Spencer · Accepted Answer · 2015-10-15 22:06:26Z

46

If you name your ui-view elements (e.g. <div ui-view="player"></div>) then you can target them in your $stateProvider config.

So, given the following markup in template.html:

<md-tabs md-selected="currentTab">
    <md-tab label="Player" ui-sref="tabs.player">
        <div ui-view="player"></div>
    </md-tab>
    <md-tab label="Map" ui-sref="tabs.map">
        <div ui-view="map"></div>
    </md-tab>
</md-tabs>

You could target each ui-view element (and update the currentTab index) with the following $stateProvider config:

.state('tabs', {
    abstract: true,
    url: '/tabs',
    templateUrl: 'template.html',
    controller: function($scope) {
      $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $scope.currentTab = toState.data.selectedTab;
      });
    }
  })
.state('tabs.player', {
    url: '/player',
    data: {
      'selectedTab': 0
    },
    views: {
      'player': {
        controller: playerController
      }
    }
  })
.state('tabs.map', {
    url: '/map',
    data: {
      'selectedTab': 1
    },
    views: {
      'map': {
        controller: mapController
      }
    }
  })

All you need to do now is define playerController and mapController. You can still load partial templates etc. into the ui-view, see the section on Multiple Named Views.

edited Oct 15, 2015 at 22:06

answered Dec 1, 2014 at 23:23

James Spencer

4765 silver badges4 bronze badges

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

11 Comments

Seiyria Over a year ago

Interesting. It seems like a wasteful and hacky way to do it (not that you can control that), but it also seems like it's the only way to do it. I'll give that a try. Thanks a ton!

James Spencer Over a year ago

No worries, just came across the same problem and names views were the only way I could figure it. If it works for you, be great if you could accept the answer. Thanks!

Seiyria Over a year ago

I managed to implement this successfully. Very nice answer, and thanks for the bit about setting selectedTab - at first I was confused, but then I refreshed the page and it hit me.

westor Over a year ago

I think, I implemented exactly this, but my template is not displayd. I use it like this: views: { 'invitations': { template: '<h1>My Contacts</h1>' } } --- but the div is empty: <div ui-view="invitations" class="ng-scope"></div> --- any idea or a plunkr to a working solution?

averas Over a year ago

Thanks.. but it still doesn't really work as expected. Try to add a template to the player/map views. It will update when clicking the tabs, but will fail to update when navigating...

|

Jimmy · Accepted Answer · 2015-02-24 09:42:28Z

7

I was able to get this going by just doing

index.html

<md-toolbar ng-controller="NavigationController as vm"
            ng-include="'app/components/navbar/navbar.html'"
            class="md-default-theme" >
</md-toolbar>

<md-content ui-view
            md-scroll-y
            class="md-default-theme"
            role="main"
            flex>
</md-content>

navbar.html

<md-tabs md-selected="vm.currentTab" md-stretch-tabs="always" class="main-toolbar">
    <md-tab label="Home" ui-sref="home"></md-tab>
    <md-tab label="Portfolio" ui-sref="portfolio"></md-tab>
    <md-tab label="Contact" ui-sref="contact"></md-tab>
</md-tabs>

app.js

$stateProvider
    .state('home', {
        url: '/',
        data: {
            'selectedTab' : 0
        },
        templateUrl: 'app/components/main/main.html',
        controller: 'MainController as vm'
    })
    .state('portfolio', {
        url: '/portfolio',
        data: {
            'selectedTab' : 1
        },
        templateUrl: 'app/components/portfolio/portfolio.html',
        controller: 'PortfolioController as vm'
    })
    .state('contact', {
        url: '/contact',
        data: {
            'selectedTab' : 2
        },
        templateUrl: 'app/components/contact/contact.html',
        controller: 'ContactController as vm'
    });

navigation.controller.js

function NavigationController($scope) {

    var vm = this;

    $scope.$on('$stateChangeSuccess', function(event, toState) {
        vm.currentTab = toState.data.selectedTab;
    });

}

answered Feb 24, 2015 at 9:42

Jimmy

4285 silver badges19 bronze badges

4 Comments

HelloWorld Over a year ago

no need for extra property to bind to. Use <md-tab label="MyLabel" ui-sref="MyState" md-active="$state.is('MyState')">

tastybytes Over a year ago

Only difference is the accepted answer uses the tab bodies and 'swipes' in and out. +1

Vin Over a year ago

this isn't working for me, getting an angular expression error. Any plunkers would help...

SAHbKA Over a year ago

It will not keep the animation on tab change

soote · Accepted Answer · 2015-01-15 00:42:13Z

6

For anyone coming from google and not using ui-router, you can do the same thing with the default ng-router: In your index file place the tabs code:

<md-tabs md-selected="0" ng-controller="TabCtrl">
    <md-tab ng-repeat="tab in tabs" md-on-select="switchTab($index)" label="{{tab}}">
        <div ng-view></div>
     </md-tab>
</md-tabs>

Then create TabCtrl:

// Define the titles of your tabs
$scope.tabs = ["Player", "Map"];

// Change the tab
$scope.switchTab = function(index) {
    switch(index) {
        case 0: $location.path('/player');break;
        case 1: $location.path('/map');break;
    }
}

Finally define your routes in your config:

.when( '/player', {
    templateUrl: 'partials/player.html',
    controller: 'PlayerCtrl'
})
.when( '/map', {
    templateUrl: 'partials/map.html',
    controller: 'MapCtrl'
});

edited Jan 15, 2015 at 0:42

answered Jan 15, 2015 at 0:10

soote

3,2801 gold badge25 silver badges36 bronze badges

1 Comment

Mustafa Alammar Over a year ago

md-selected needs to change depending on which tab is active otherwise you'll get odd redirect issues.

alox wagnor · Accepted Answer · 2015-01-18 13:49:21Z

Here, a bit changed with the original docu(https://material.angularjs.org/#/demo/material.components.tabs):

I added some comments. If somebody leave or refresh your page, hes going enter the same tab...

HTML:

  <md-tabs md-selected="selectedIndex">

<md-tab ng-repeat="tab in tabs" md-on-select="announceSelected(tab, $index)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled" label="{{tab.title}}">

   </md-tab>
 </md-tabs>

Controller:

var tabs = [
             { title: 'welcome'},
             { title: 'profile'},
            ];



     $scope.selectedIndex = 0;
    // $scope.selectedIndex = parseInt($cookies.selectedIndex);
     $scope.tabs = tabs;



$scope.announceSelected = function(tab, index) {

 //$cookies["selectedIndex"] = index;
       RedirectService.To(tab.title);
}

factroy:

app.factory('RedirectService', function ($location){
        return{
                    To : function(key){

                        return $location.path(key)
                    },
            };
});

dysbulic · Accepted Answer · 2017-09-21 17:53:55Z

An alternative that allows linking directly to the tab, and preserves forward and back behavior is to use the HTML structure from this answer, then inject $transitions to use the onSuccess listener:

angular.module('tabs', ['ngMaterial', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
  ($stateProvider, $urlRouterProvider) => {
    $stateProvider
    .state('home', {
      url: '/',
      data: { selectedTab: 0 },
      template: '<p>HOME</p>',
    })
    .state('portfolio', {
      url: '/portfolio',
      data: { selectedTab: 1 },
      template: "<p>'FOLIO</p>",
    })
    .state('contact', {
      url: '/contact',
      data: { selectedTab: 2 },
      template: "<p>'TACT</p>",
    })
  }
  ])
.controller('NavigationController', function($scope, $transitions) {
  $transitions.onSuccess({},
    function(transition) {
      var $state = transition.router.stateService
      var currentTab = $state.$current.data.selectedTab
      $scope.selectedTab = currentTab
    }
  )
})

A working example is at: https://dysbulic.github.io/angular-tabs/

Collectives™ on Stack Overflow

Separate controller per tab in angular-material w/ ui-router

5 Answers 5

11 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related