角ui路由器:使用父视图的子节点

In story form:

以故事形式:

What I am looking for here is a master-detail setup. The master is in list form and when I click on a link (relative to a particular row/record (or Account in this case)) I want to see the details in the main view (literally, the "main" view: <div class="container" ui-view="main"></div>).

我在这里寻找的是一个总体细节设置。当我点击一个链接(相对于特定的行/记录(或者在本例中是这样的))时，我希望看到主视图中的详细信息(从字面上看，“main”视图:

)。

I want to do this and maintain my URL structure (/accounts for the list of Accounts; /accounts/:id for the detailed version) but I want the detail view to use the view that the list was using.

我想这样做并维护我的URL结构(/account for the list of accounts);/accounts/:详细版本的id)但是我希望细节视图使用列表使用的视图。

What I currently have

我目前拥有的

index.html

index . html

...
<div class="container" ui-view="main"></div>
...

accounts.js

accounts.js

$stateProvider
    .state ('accounts', {
        url: '/accounts',
        views: {
            'main': {
                controller: 'AccountsCtrl',
                templateUrl: 'accounts/accounts.tpl.html'
            }
        },
        data: { pageTitle: 'Account' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                controller: 'AccountDetailCtrl',
                templateUrl: 'accounts/detail.tpl.html'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });

At this point, the /accounts route works as expected. It displays accounts/accounts.tpl.html correctly in the main view. In that html each line in the repeater links it to its appropriate /accounts/:id URL, which I am handling with the nested state accounts.detail.

此时，/accounts路由按照预期的方式工作。它显示账户/ accounts.tpl。在主视图中正确地显示html。在html中，中继器中的每一行都将它链接到相应的/accounts/:id URL，我正在使用嵌套状态accounts.detail处理这个URL。

What is probably obvious to the majority of you who know more than me about this, my accounts.detail will render to the view main if that named view exists in the template accounts/accounts.tpl.html. That is indeed true.

如果模板帐户/account .tpl.html中存在名为view的视图，那么我的account . details将呈现给view main。这确实是真的。

But that is not what I want. I want the accounts.detail stuff to render in the parent main view; I want the html of accounts/detail.tpl.html to replace the html of accounts/accounts.tpl.html found in index.html: <div class="container" ui-view="main"></div>.

但那不是我想要的。我想在父主视图中显示account . details内容;我需要account / details .tpl的html。替换帐户/帐户的html。html索引中找到。html:< div class = "容器"用户界面视图= "主" > < / div >。

So how could I accomplish this?

那么我该怎么做呢?

MY SOLUTION IN CONTEXT The trick is, as the answer says, to set up the URL scheme to identify which child state is "default". The way I interpret this code in plain English is that the parent class is abstract with the proper URL and the "default" child class has the "same" URL (indicated by '').

我在上下文中的解决方案是，如答案所说，设置URL方案来标识哪个子状态是“默认”。我用简单的英语解释这段代码的方法是，父类是抽象的，具有正确的URL，而“默认”子类具有“相同”的URL(由“”表示)。

If you need further clarity, just post a comment and I'll share any more guidance.

如果你需要进一步澄清，只需发表评论，我将分享更多的指导。

.config(function config( $stateProvider ) { $stateProvider
    .state ('accounts', {
        abstract: true,
        url: '/accounts',
        views: {
            'main': {
                templateUrl: 'accounts/accounts.tpl.html',
                controller: 'AccountsCtrl'
            }
        },
        data: { pageTitle: 'Accounts' }
    })
    .state ('accounts.list', {
        url: '',
        views: {
            'main': {
                templateUrl: 'accounts/list.tpl.html',
                controller: 'AccountsListCtrl'
            }
        },
        data: { pageTitle: 'Accounts List' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',
                controller: 'AccountDetailCtrl'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });

2 个解决方案

#1

Sounds like you simply don't want the views to be hierarchical. To do this, simply change the name of the second state to detail.

听起来您只是不希望视图具有层次性。为此，只需将第二个状态的名称更改为detail。

Note however, that in doing so you will lose any hierarchical properties of the state tree (the controller code state of accounts for example).

但是请注意，这样做会丢失状态树的任何层次属性(例如，帐户的控制器代码状态)。

If you want to keep the controllers hierarchical, but perform a replace of the html, I would create another parent above both others that takes care of the controller logic, but only has an extremely simple view <div ui-view=""></div>.

如果您希望保持控制器的层次性，但是要执行html替换，那么我将创建另一个父类，在其他父类之上，它负责控制器逻辑，但是只有一个非常简单的视图

"。

For example:

例如:

$stateProvider
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });

#2

You can use '@' to define an absolute path to the ui-view of your choice. For example: "detail@contacts" : { }, where this absolutely targets the 'detail' view in the 'contacts' state. within contacts.html

您可以使用“@”来定义您选择的ui视图的绝对路径。例如:“detail@contacts”:{}，其中绝对针对‘contacts’状态中的‘detail’视图。在contacts.html

Source: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

来源:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

#1