我已经实现了md-sidenav
允许通过在sidenav列表中选择它来导航到不同的HTML模板。
我试图将预选在我的第一个项目md-sidenav
加载整个HTML页面时。 所以,我没有按下第一个按钮的UI路由器被路由到第一个模板。
HTML:
<md-sidenav flex class="sidenav md-whiteframe-z2 md-sidenav-left" md-component-id="left">
<md-button ng-repeat-start="item in menuItems"
flex layout="column" layout-align="center center"
ng-click="selectItem(item)"
ui-sref="{{item.sref}}">
<div class="md-tile-content">
{{item.name}}
</div>
</md-button>
<md-divider ng-repeat-end></md-divider>
</md-sidenav>
<md-content flex class="md-padding page-content">
<div ui-view></div>
</md-content>
控制器:
menuItems = [
{
name: 'personA',
icon: 'person',
sref: '.personA'
},
{
name: 'personB',
icon: 'person',
sref: '.personB'
},
{
name: 'personC',
icon: 'person',
sref: '.personC'
}
];
function toggleItemsList() {
$mdSidenav('left').toggle();
}
function selectItem (item) {
self.title = item.name;
self.toggleItemsList();
}
UI路由器的stateProvider:
$stateProvider
.state('.personA', {
url:...
controller:...
templateUrl:...
})
.state('.personB', {
url: ...
controller:...
templateUrl: ...
})
.state('.personC', {
url: ...
controller: ...
templateUrl: ...
});
我用知道的第一个模板的参数ng-init
和$first
,但由于某些原因,UI的路由器不被触发所以没有HTML模板被加载。 我想我需要操纵ui-sref="{{item.sref}}"
,但不知道这一点。