Question

我的app.js中有以下代码：

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/login/login.html'
        })
        .state('admin', {
            url: '/admin',
            templateUrl: 'app/admin/layout/layout.html',
            abstract: true
        })
        .state('admin.dashboard', {
            url: '',
            templateUrl: 'app/admin/dashboard/dashboard.html'
        })
        .state('admin.client', {
            url: '/client',
            templateUrl: 'app/admin/client/client.html',
            controller: 'ClientController',
        })
        .state('admin.client.new', {
            url: '/client/new',
            templateUrl: 'app/admin/client/new.html',
            controller: 'ClientController',
        })

然后，在layout.html上我有这个：

<section class="content" ui-view></section>

默认情况下会加载admin.dashboard。从那里我有一个链接加载admin.client

没关系。但问题出在我的client.html。我得到了以下内容：

<a ui-sref=".new">
     <button class="btn btn-app">
         <i class="ion ion-plus"></i> New Client
     </button>
</a>

我期望它做的是将layout.html中的ui-view从client/client.html更改为client/new.html，但没有任何反应。

如果我在client.html中添加了ui-view标记，那么就会加载new.html。但我需要加载layout.html的ui-view。

Answer 1

如果使用属性ui-view而不指定视图名称，如ui-view =“myviewname”，则stateProvider将视图层次结构（嵌套的ui-view属性）与状态层次结构相匹配。所以它期望在client.html中找到目标ui-view，就像你自己发现的一样。

将州名“admin.client.new”更改为“admin.newclient”，并将您的ui-sref链接更改为“admin.newclient”。也许这就是你想要的。

Answer 2

StrangeLoop的回答有效，但我找到了更好的解决方案。

我将parent参数添加到新客户端状态。现在看起来像：

.state('admin.client.new', {
    parent: 'admin',
    url: '/client/new',
    templateUrl: 'app/admin/client/new.html',
    controller: 'ClientController',
})

并client.html：

<a ui-sref="admin.client.new">
    <button class="btn btn-app">
        <i class="ion ion-plus"></i> Novo Cliente
    </button>
</a>

使用angular-ui-router的嵌套视图的问题

2 个答案: