web-dev-qa-db-ja.com

Angular UI-Router：親のビューを使用する子

ストーリー形式：

ここで探しているのは、マスター/ディテール設定です。マスターはリスト形式であり、リンクをクリックすると（特定の行/レコード（またはこの場合はAccount）に関連する）メインビュー（文字列では、「メイン」ビュー：<div class="container" ui-view="main"></div>）で詳細を表示したい。

これを行い、URL構造を維持したい（アカウントのリストには/accounts、詳細バージョンには/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ルートは期待どおりに機能します。 mainビューにaccounts/accounts.tpl.htmlを正しく表示します。そのhtmlでは、リピーターの各行が適切な/accounts/:id URLにリンクし、ネストされた状態accounts.detailで処理しています。

これについて私以上に知っている大多数の人にとっておそらく明らかなことは、私のaccounts.detailはビューmainその名前付きビューがテンプレートaccounts/accounts.tpl.htmlにある場合にレンダリングします。確かにそうです。

しかし、それは私が望むものではありません。 accounts.detailのものを親mainビューでレンダリングしたい。 accounts/detail.tpl.htmlのHTMLをreplaceaccounts/accounts.tpl.htmlにあるindex.html: <div class="container" ui-view="main"></div>のHTMLにしたい。

では、どうすればこれを達成できますか？

コンテキスト内のマイソリューション答えは、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', {
        url: '/:id',
        views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',
                controller: 'AccountDetailCtrl'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });
angularjsangular-ui-routerangularjs-routing
32
Honus Wagner

ビューを階層的にしたくないだけのように聞こえます。これを行うには、2番目の状態の名前をdetailに変更します。

ただし、そうすると、状態ツリーの階層プロパティ（たとえば、アカウントのコントローラーコードの状態）が失われることに注意してください。

コントローラーを階層的に保ちながらhtmlの置換を実行する場合、コントローラーロジックを処理する他の親の上に別の親を作成しますが、ビューは非常に単純です<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' });
38
Matt Way

「@」を使用して、選択したUIビューへの絶対パスを定義できます。例： "detail @ contacts"：{}、これは「contacts」状態の「detail」ビューを絶対的に対象としています。 contacts.html内

ソース： https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

14
Jakub