带有 ui-router 的 angular-material 中每个选项卡的单独控制器

2022-01-21 00:00:00 angularjs javascript angular-material angular-ui-router material-design

我正在尝试实现我的 md-tabs，因此每个 md-tab 都是使用 angular-material 的单独状态.我当前的标记如下所示:

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)

不过，我认为这不是 ui-router 的有效标记.是否可以使用当前版本的 angular-material 和 ui-router 做到这一点?

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-view 元素(例如 <div ui-view="player"></div>) 然后你可以在你的 $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>

您可以使用以下 $stateProvider 配置来定位每个 ui-view 元素(并更新 currentTab 索引):

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 和 ma​​pController.您仍然可以将部分模板等加载到 ui-view 中，请参阅 多个命名视图.

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.

相关文章