Question

我一直在玩UI-Router，因为根据我需要多个嵌套视图的不同布局，ngRoute并没有完全涵盖我需要的内容。我在UI-Router中无法弄清楚的是如何在不必点击链接的情况下加载默认的嵌套视图。我在plunker

中创建了一个粗略的例子

基本上每个主要路由有两个容器，它有一个容纳嵌套视图的容器。我想在其中加载默认视图，而不必单击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

由于

Answer 1

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

.state('parentState', {
//...
    params: {
        autoActivateChild: 'parentState.childState'
    }
//...
})

并将其添加到某处

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

Answer 2

如果您想在父加载时自动导航到默认子状态，则可以触发控制器中该特定ui-sref的单击。

angular.element("#childElementId").trigger('click');

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

2 个答案: