每片单独的控制器在角材W / UI路由器

问题描述

目前，我与角料工作，试图实现我的 MD-标签页所以每个 MD-标签是一个独立的国家。我当前的标记看起来是这样的：

Currently, I'm working with angular-material, attempting to implement my md-tabs so each md-tab is a separate state. 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)

我不认为这是对UI的路由器有效的标记，虽然。是否有可能与角料和UI路由器的当前版本要这样做呢？

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?

推荐答案

如果你的名字你的UI视图元素（例如＆LT;格UI视图=玩家＆GT;＆LT; / DIV＆GT; ），那么你可以在你的$ stateProvider配置针对他们。

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

因此​​，考虑下面的标记 template.html

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>

您可以针对每个用户界面视图元素（和更新currentTab指数）与下列$ stateProvider配置：

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

现在你所需要做的就是定义的PlayerController 和 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.

这篇关于每片单独的控制器在角材W / UI路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！