Angular UI-Router:使用父母视图的孩子 [英] Angular UI-Router: child using parent's view

问题描述

故事形式:

我在这里寻找的是主从设置.主人是列表形式，当我点击一个链接(相对于特定的行/记录(或本例中的帐户))时，我想在主视图中查看详细信息(字面意思是主"视图:<div class="container" ui-view="main"></div>).

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>).

我想这样做并维护我的 URL 结构(/accounts 用于帐户列表；/accounts/:id 用于详细版本)但是我希望详细视图使用列表正在使用的视图.

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.

我目前拥有的

index.html

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

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

此时，/accounts 路由按预期工作.它在 main 视图中正确显示 accounts/accounts.tpl.html.在该 html 中继器中的每一行将其链接到其适当的 /accounts/:id URL，我正在处理嵌套状态 accounts.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.detail 将呈现到视图 main 如果命名视图存在于模板 accounts/accounts.tpl.html 中.确实如此.

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.

但这不是我想要的.我希望 accounts.detail 东西在父 main 视图中呈现；我想要 accounts/detail.tpl.html 的 html 来 replace 在 中找到的 accounts/accounts.tpl.html 的 htmlindex.html: <div class="container" ui-view="main"></div>.

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>.

那么我怎么能做到这一点呢?

So how could I accomplish this?

我的上下文解决方案正如答案所说，诀窍是设置 URL 方案来识别哪个子状态是默认"的.我用简单的英语解释这段代码的方式是父类是抽象的，具有正确的 URL，而默认"子类具有相同"的 URL(由 '' 表示).

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 '').

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

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

推荐答案

听起来您根本不希望视图是分层的.为此，只需将第二个状态的名称更改为 detail.

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.

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

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

如果你想保持控制器的层次结构，但执行 html 的替换，我会在其他两个父级之上创建另一个父级来处理控制器逻辑，但只有一个非常简单的视图 <div ui-view=""></div>.

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>.

例如:

$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' });

这篇关于Angular UI-Router:使用父母视图的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！