중첩된 뷰로 templateurl 및 컨트롤러 중첩 추상 상태를 채우는 UI 라우터

Question

나는 실험을 해왔다. ui-router 그리고 나는 약간의 이상한 점에 부딪혔습니다.추상 상태 아래에 뷰를 채울 수 없습니다.상태가 활성화되어 있는 동안에는 뷰를 찾을 수 없는 것 같습니다.

예는 다음과 같습니다.

주 공급자:

$stateProvider
.state('search', {
    abstract: true,
    url: '',
    views: {
        '@': { 
            templateUrl: 'app/views/layout.html',
        },
        'full-page@search': {
            templateUrl : 'app/views/search/search.html',
        }
    }
})

//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
    url: '/search/users',
    views: {
        'content-container@search' : {
            templateUrl : 'app/views/search/user.list.html',
            controller  : 'SearchResults',
        }
    }
})

//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
    abstract : true,
    url: '/search/usr/{userId}',
    views: {
        'content-container@search' : {
            templateUrl: 'app/views/user/user.detail.html',
            controller : 'UserController', 
        },
    }
})

//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
    url : '',
    views: {
        'left-column@search' : { 
            templateUrl : 'app/views/user/user.detail.view.html',
            controller  : 'UserEditController',
        }
    }
})`

HTML:

index.html :

<div> <div ui-view></div> </div>

레이아웃.html:

<div> <div ui-view='full-page'></div> </div>

검색.html:

<div> <div ui-view='content-container'></div> </div>

user.list.html :

<div> <ul> <li ng-repeat="user in users"> <a ui-sref='search.user.view({userId : user.userId})'></a> </li> </ul> </div>

user.detail.html :

<div> <div ng-view="left-column"></div> <div ng-view='right-column'></div>
</div>

user.detail.view.html :

<div> User information </div>

내가 얻으려는 페이지 상태 흐름은 다음과 같습니다.

1) search.list의 초기 사이트 로딩(최대 버블링)

• 1.a:짐 layout.html 기본 UI보기로 index.html '@' 보기'를 통해
• 1.b: search.html 레이아웃.html의 "전체 페이지" 보기를 통해 로드된 다음
• 1.c: user.list.html 다음을 통해 로드됩니다. content-container@search search.list 상태로 봅니다.이건 잘 작동하고 멋져요

2) 생성된 목록을 클릭합니다. user.list.html search.user.view를 로드해야 하나요?search.user로 다시 돌아가서,

• 2. 부하 user.detail.html 에서 content-container@search search.html 보기(이것이 작동함)
• 2.b 로드 user.detail.view.html 에서 ui-view='left-column' user.detail.html의 div입니다.(이것은 작동하지 않습니다. "왼쪽 열" 보기는 비어 있습니다.)

나는 원래 이 코드가 추상 상태 ui-view 채우기의 동일한 패턴을 두 번(user.list에 대해 한 번, user.detail.view에 대해 한 번) 수행한다고 생각했지만 그렇지 않은 것 같습니다.마치 "left-column" 콘텐츠 컨테이너가 채워지기 전에 뷰가 검색됩니다.

저는 UI 라우터를 처음 사용하기 때문에 추상 상태가 어떻게 채워지는 순서나 추상 상태의 의도된 사용에 대해 오해를 가질 수 있습니다.

Answer 1

거의 다 왔습니다. 일하는 플런저.내가 변경한 사항

user.detail.html

아니라 ng-뷰 하지만 ui-view

<div> 
   //<div ng-view="left-column"></div> 
   //<div ng-view='right-column'></div>
   <div ui-view="left-column"></div> 
   <div ui-view='right-column'></div>
</div>

상태 'search.user.view'

그 이후의 부분 @ 구분 기호는 상태 그 ui-view를 잡고 - 그렇지 않습니다 찾다 하지만 search.user.내가 보여주듯이 right-column 아래 - 이것이 실제로 부모라면...우리는 그것을 건너뛸 수 있습니다 (무대 뒤에서 우리를 위해 수행됩니다)

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

실제 사례를 확인해보세요 여기