AngularJS UI 라우터:중첩된 명명된 뷰를 구성하는 방법은 무엇입니까?

AngularJS UI 라우터:중첩된 명명된 뷰를 구성하는 방법은 무엇입니까?

아래와 같은 구성이 있습니다.

...
.state('profiles', {
    abstract: true
    , url : '/profiles'
    , resolve: {...}    
    , views: {
      mainModule: {
        templateUrl : '/partials/home.html'
        , controller : 'HomeCtrl'
      }
      , leftSidePaneModule: {
          templateUrl : '/partials/leftSidePane.html'
          , controller : 'LeftSidePaneCtrl'
      }
    }
  })
...

주옥 파일

...
.col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll="false")  
...

그렇게,leftSidePaneModule모듈이 에 채워집니다.ui-view='leftSidePaneModule'자리 표시자그런데 문제는 제 안에 이름이 붙은 뷰가 2개 더 있다는 거예요.leftSidePaneModule템플릿을 사용합니다.leftSidePaneModule템플릿은 다음과 같습니다.

leftSidePaneModule.html

<div>
  <div ui-view="leftWidgetOne"></div>
  <div ui-view="leftWidgetTwo"></div>
</div>

모듈을 만드는 방법leftWidgetOne&leftWidgetOne위의 자리 표시자에 채워지는 건가요?

나는 노력했다.

...
.state('profiles', {
    abstract: true
    , url : '/profiles'
    , resolve: {...}    
    , views: {
      mainModule: {
        templateUrl : '/partials/home.html'
        , controller : 'HomeCtrl'
      }
      , leftSidePaneModule: {
          templateUrl : '/partials/leftSidePane.html'
          , controller : 'LeftSidePaneCtrl'
      }
      , 'leftWidgetOne@leftSidePaneModule' : {...}
      , 'leftWidgetTwo@leftSidePaneModule' : {...}
    }
  })
...

시도: 2

...
.state('profiles', {
    abstract: true
    , url : '/profiles'
    , resolve: {...}    
    , views: {
      mainModule: {
        templateUrl : '/partials/home.html'
        , controller : 'HomeCtrl'
      }
      , leftSidePaneModule: {
          templateUrl : '/partials/leftSidePane.html'
          , controller : 'LeftSidePaneCtrl'
          , views: {
             'leftWidgetOne' : {...}
             , 'leftWidgetTwo' : {...}
          }
      }
    }
  })
...

둘 다 작동하지 않습니다.

어떻게 하죠?

감사합니다!

해결책은 여기서 찾을 수 있습니다: View Names - Relative vs. 절대 이름.인용문:

모든 뷰에는 다음과 같은 스킴을 따르는 절대 이름이 할당됩니다.viewname@statename,어디에viewname는 에서 사용되는 이름입니다.view지시 및 주 이름은 주의 절대 이름입니다. 예를 들어.contact.item
...
(참고: 우리의 경우 반드시 그래야 합니다.)

중요한 것은 우리가 전체 (절대) 이름을 사용할 수 있다는 것입니다.view, 현재 상태 정의의 일부입니다.

$stateProvider
    .state('profiles', {
        url: '/profiles',
        views: {
            mainModule: {
                template: '<div>' +
                          '  <h1>Main</h1>' +
                          '  <div ui-view="leftSidePaneModule"></div>' +
                          '</div>',
            },
            // here we do target the view just added above, as a 'mainModule'
            // as <div ui-view="leftSidePaneModule">
            'leftSidePaneModule@profiles': {
                template: '<div>' + 
                            '  <div ui-view="leftWidgetOne"></div>' + 
                            '  <div ui-view="leftWidgetTwo"></div>' +
                            '</div>',
            },
            // and here we do target the sub view
            // but still part of the state 'profiles' defined in the above
            // view defintion 'leftSidePaneModule@profiles'
            'leftWidgetOne@profiles': {
                template: '<h2>One</2>',
            },
            'leftWidgetTwo@profiles': {
                template: '<h2>Two</2>',
            },
        }
    });

위의 코드를 보여주는 플렁커가 작동중입니다.

언급URL : https://stackoverflow.com/questions/23590574/angularjs-ui-router-how-to-configure-nested-named-views