如果您命名您的 ui-view 元素(例如<div ui-view="player"></div>
),那么您可以在 $stateProvider 配置中定位它们。
因此,给定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>
ui-view
您可以使用以下 $stateProvider 配置来定位每个元素(并更新 currentTab 索引):
.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。您仍然可以将部分模板等加载到 中ui-view
,请参阅有关多个命名视图的部分。