Angular UI-Router: 부모 뷰를 사용하는 자식

Angular UI-Router: 부모 뷰를 사용하는 자식

스토리 형식:

여기서 찾고 있는 것은 마스터 상세 설정입니다.마스터는 목록 형식이며 링크를 클릭하면(이 경우 특정 행/레코드(또는 계정)에 상대됨)메인 뷰(문자 그대로 "메인" 뷰)에서 자세한 내용을 보고 싶다.<div class="container" ui-view="main"></div>).

이것을 실시해, URL 구조를 유지하고 싶다(/accounts어카운트 리스트의 경우/accounts/:id(상세 버전용) 단, 리스트에서 사용하던 뷰를 상세 뷰에서 사용할 수 있도록 합니다.

현재 가지고 있는 것

index.displaces를 표시합니다.

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

accounts.displays(계정).

$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올바르게main보기. 그 안에서html리피터의 각 회선은 그것을 적절한 회선에 링크한다./accounts/:id네스트된 상태로 처리하고 있는 URLaccounts.detail.

저보다 더 많이 알고 계신 여러분들께 분명해 보이는 것은,accounts.detail뷰에 표시하다main 이름이 붙은 뷰가 템플릿에 존재하는 경우.그것은 정말 사실이다.

하지만 그것은 내가 원하는 것이 아니다.나는 그 것을 원한다.accounts.detail부모에게 렌더링하는 것mainview; 의 html을 원합니다.accounts/detail.tpl.html의 html을 대체하다accounts/accounts.tpl.html에서 발견되다.index.html: <div class="container" ui-view="main"></div>.

그럼 어떻게 해야 하죠?

MY SOLUTION IN Context 답은 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' }
    });

단순히 뷰가 계층화되지 않기를 바라는 것처럼 들립니다.이렇게 하려면 두 번째 상태의 이름을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' });

'@'를 사용하여 선택한 UI 보기에 대한 절대 경로를 정의할 수 있습니다.예를 들어 "detail@contacts" : { }, 여기서 "contacts" 상태의 "detail" 뷰를 절대적으로 대상으로 합니다.contacts.displaces 내

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

언급URL : https://stackoverflow.com/questions/21988151/angular-ui-router-child-using-parents-view