Bộ định tuyến giao diện người dùng AngularJS: Cách định cấu hình chế độ xem được đặt tên lồng nhau?

Question

Tôi có một cấu hình như dưới đây:

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

chính Jade tập

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

Vì vậy, leftSidePaneModule mô-đun được dân cư trong để ui-view='leftSidePaneModule' giữ chỗ. Nhưng vấn đề là, tôi có thêm 2 lượt xem có tên trong mẫu leftSidePaneModule. leftSidePaneModule mẫu trông như thế này:

leftSidePaneModule.html

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

Làm thế nào để tôi làm cho module leftWidgetOne & leftWidgetOne được dân cư trong để giữ chỗ trên?

tôi đã cố gắng,

... 
.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' : {...} 
    } 
    }) 
... 

Attempt: 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' : {...} 
      } 
     } 
    } 
    }) 
... 

Cả hai đều không làm việc.

Bạn làm như thế nào?

Cảm ơn!

Answer 1

Giải pháp có thể tìm thấy tại đây: View Names - Relative vs. Absolute Names. Một trích dẫn:

Đằng sau hậu trường, mỗi điểm được gán một tên tuyệt đối rằng sau một chương trình của viewname@statename, nơi viewname là tên được sử dụng trong view chỉ thị và bang tên là tên tuyệt đối của nhà nước, ví dụ contact.item
...
(lưu ý: trong trường hợp của chúng tôi phải là 'profiles').

Vấn đề là, chúng ta có thể sử dụng đầy đủ (tuyệt đối) tên của view, là một phần của định nghĩa tình trạng hiện thời :

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

Ngoài ra còn có plunker hiển thị ở trên mã đang hoạt động