Question

190

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

rated 0 times [ 191] [ 1] / answers: 1 / hits: 20902 / 10 Years ago, mon, december 1, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

roberts

Add To Favorites

Follow

Total Points: 212

Total Questions: 101

Total Answers: 101

Location: Philippines

Member since Thu, Apr 14, 2022

2 Years ago

roberts questions

1 How to filter date range using vue js?

Sun, Feb 14, 21, 00:00, 3 Years ago

1 OnClick violating Content Security Policy

Tue, Dec 8, 20, 00:00, 4 Years ago

1 Finding min and max in array Javascript

Wed, Jul 15, 20, 00:00, 4 Years ago

1 Typescript : SyntaxError: Unexpected token 'export'

Wed, May 27, 20, 00:00, 4 Years ago

1 Svelte - access child component's method

Mon, Apr 20, 20, 00:00, 4 Years ago

View All

answered 10 Years ago eliza · Accepted Answer

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.