angularjs – Angular UI-Router：child使用父视图

故事形式：

我在这里寻找的是一个主 – 细节设置。主人是在列表形式，当我点击链接(相对于特定的行/记录(或在这种情况下，帐户))我想看到主视图中的细节(字面上，“主”视图： div class =“container”ui-view =“main”>< / div>)

我想这样做，并维护我的URL结构(/帐户的帐户列表; / accounts /：id的详细版本)，但我想详细信息视图使用列表正在使用的视图。

我现在有什么

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路径按预期工作。它在主视图中正确显示accounts / accounts.tpl.html。在该html中，中继器中的每一行都将其链接到其适当的/ accounts /：id URL，我使用嵌套状态accounts.detail处理。

对于大多数对我来说了解更多的人来说，这可能是显而易见的，如果模板accounts / accounts.tpl.html中存在被命名的视图，我的accounts.detail将会渲染到视图main。这是真的。

但这不是我想要的。我想要accounts.detail的东西在父主视图中呈现;我想要帐户的html / detail.tpl.html替换index.html中找到的帐户/ accounts.tpl.html的html：< div class =“container”ui-view =“main”>< div&gt ;. 那么我该怎么做呢？我的解决方案
诀窍是，如答案所说，设置URL方案来识别哪个子状态是“默认”。我用简单的英语解释这个代码的方式是，父类是抽象的正确的URL和“默认”子类有“相同”的URL(由”表示)。

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

.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',views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',controller: 'AccountDetailCtrl'
            }
        },data: { pageTitle: 'Account Detail' }
    });

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

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

如果你想保持控制器分层，但执行一个替换的html，我会创建另一个父以上两个其他的照顾控制器逻辑，但只有一个非常简单的视图< div ui-view =“”> ;< / div&gt ;. 例如：

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

原文链接：https://www.f2er.com/angularjs/145656.html

angularjs – Angular UI-Router：child使用父视图

猜你在找的Angularjs相关文章