如何以编程方式预设UI路由器的状态 [英] How to preset state of ui-router programmatically

问题描述

我已经实现了一个 md-sidenav ，它可以通过在sidenav列表中选择它来导航到不同的html模板.
我正在尝试的是在加载整个html页面时预选择 md-sidenav 中的第一项.因此，我不必按第一个按钮即可通过ui-router路由到第一个模板.

I have implemented an md-sidenav which allows to navigate to different html templates by selecting it in the sidenav list.
What I am trying is to preselect the first item in my md-sidenav when the whole html page is loaded. So I don't have to press the first button to get routed to the first template by ui-router.

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

用户界面路由器的状态提供者:

$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}}" ，但对此不确定.

I know the parameter of the first template by using ng-init and $first but for some reason the ui-router doesn't get triggered so no html template is loaded. I think I need to manipulate ui-sref="{{item.sref}}" but not sure about this.

推荐答案

要通过ui-router以编程方式设置默认状态，您可以使用

To programmatically set a default state with ui-router you can use $urlRouterProvider:

$ urlRouterProvider.otherwise('/yourDefaultStateUrl');

示例:

function myConfig($stateProvider, $urlRouterProvider){
    $stateProvider
    .state('home', {
        url: '/home', 
        templateUrl:... 
    })
    .state('about', {
        url: '/home', 
        templateUrl: ...
    });

    $urlRouterProvider.otherwise('/home'); //Home as default state
}

这篇关于如何以编程方式预设UI路由器的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！