UI-Router如何在父视图中自动加载嵌套视图作为默认值

mtp*_*ltz 10 angularjs angular-ui-router

我一直在玩UI-Router,因为根据我需要多个嵌套视图的不同布局,ngRoute并没有完全涵盖我需要的东西.我在UI-Router中无法弄清楚的是如何在不必点击链接的情况下加载默认的嵌套视图.我创造了一个粗略的例子,说明我在一个傻瓜中的意思

基本上每个主要路径有两个主机,它有一个容纳嵌套视图的容器.我想在其中加载默认视图而无需单击ui-sref.

<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login
Run Code Online (Sandbox Code Playgroud)

谢谢

Kir*_*ota 12

在您的父状态中添加一个参数

.state('parentState', {
//...
    params: {
        autoActivateChild: 'parentState.childState'
    }
//...
})
Run Code Online (Sandbox Code Playgroud)

并将其添加到某个地方

$rootScope.$on('$stateChangeSuccess', function(event, toState){
    var aac;
    if(aac = toState && toState.params && toState.params.autoActivateChild){
        $state.go(aac);
    }
});
Run Code Online (Sandbox Code Playgroud)