angularjs - ui.router sibling states

Question

Я использую bootstrap с angularjs (и ui-router для маршрутизации).
У меня есть navbar, где каждый щелчок на вкладке нужно просмотреть другой вложенный navbar. Вложенный navbar является ui-view (должен ли я делать это по-другому?).
Проблема в том, что когда я нажимаю один li в главном навигаторе, отображаются все четыре вложенных отображения навигационной панели.

div(ng-controller='MyCtrl') 
h1 Header 
ul.nav.nav-tabs(role="tablist") 
    li.active(role="presentation") 
     a(ui-sref='first_nested_state') General 
     div(ui-view) 
    li.active.navbar-padding-left(role="presentation") 
     a(ui-sref='second_nested_state') User 
     div(ui-view) 
    li.active.navbar-padding-left(role="presentation") 
     a(ui-sref='third_nested_state') User 
     div(ui-view) 
    li.active.navbar-padding-left(role="presentation") 
     a(ui-sref='fourth_nested_state') User 
     div(ui-view) 

И вот одна вложенная Navbar (все они выглядят одинаково, за исключением имен):

div(ui-view) 
ul.nav.nav-tabs(role="tablist", color="red") 
    li.active(role="presentation") 
    a(ng-href='#') A 
    li.active(role="presentation") 
    a(ng-href='#') B 
    li.active(role="presentation") 
    a(ng-href='#') C 

И мое состояние конфигурации:

$stateProvider 
    .state('main_nav_bar', { 
      url: '/main_nav_bar', 
      templateUrl: 'main_nav_bar.html' 
     }) 
    .state('first_nested_navbar', { 
     parent: 'main_nav_bar', 
     url: '/first_nested_navbar', 
     templateUrl: 'first_nested_navbar.html' 
     }) 
    .state('second_nested_navbar', { 
     parent: 'mainNavBar', 
     url: '/second_nested_navbar', 
     templateUrl: 'second_nested_navbar.html' 
     }) 

Я использую coffeescript и jade.

Answer 1

Вопрос здесь («... когда я нажимаю один <li> ... все четыре вложенных друг в друга видом NavBar показаны ...») связано с повторным определением div(ui-view)

Это означает, что , что на странице DOM содержится 4 <div ui-view></div>. Все они используются как цель для выбранного контента. Вот почему мы видим это четыре раза.

Решение должно быть в названных просмотров:

см: Multiple Named Views

В нашем случае, мы должны использовать это определение HTML

li.active(role="presentation") 
    a(ui-sref='first_nested_state') General 
    div(ui-view="first") // give it name "first" 
li.active.navbar-padding-left(role="presentation") 
    a(ui-sref='second_nested_state') User 
    div(ui-view="second") // give it name "second" 
... 

И использовать явные взгляды определения наших государств:

... 
.state('first_nested_navbar', { 
    parent: 'main_nav_bar', 
    url: '/first_nested_navbar', 
    views : { 
     'first' : { // now we explicitly inject into anchor/target "first" 
     templateUrl: 'first_nested_navbar.html' 
     }, 
    } 
    }) 
.state('second_nested_navbar', { 
    parent: 'mainNavBar', 
    url: '/second_nested_navbar', 
    views : { 
     'second' : { // here we target the ui-view="second" 
     templateUrl: 'second_nested_navbar.html' 
     }, 
    } 
    }) 

Проверьте действительно хорошо документированы пример here см ниже отрывок из этого источника:

$stateProvider 
    .state('contacts', { 
    // This will get automatically plugged into the unnamed ui-view 
    // of the parent state template. Since this is a top level state, 
    // its parent state template is index.html. 
    templateUrl: 'contacts.html' 
    }) 
    .state('contacts.detail', { 
    views: { 
     //////////////////////////////////// 
     // Relative Targeting    // 
     // Targets parent state ui-view's // 
     //////////////////////////////////// 

     // Relatively targets the 'detail' view in this state's parent state, 'contacts'. 
     // <div ui-view='detail'/> within contacts.html 
     "detail" : { },    

     // Relatively targets the unnamed view in this state's parent state, 'contacts'. 
     // <div ui-view/> within contacts.html 
     "" : { }, 

     /////////////////////////////////////////////////////// 
     // Absolute Targeting using '@'      // 
     // Targets any view within this state or an ancestor // 
     /////////////////////////////////////////////////////// 

     // Absolutely targets the 'info' view in this state, 'contacts.detail'. 
     // <div ui-view='info'/> within contacts.detail.html 
     "info@contacts.detail" : { } 

     // Absolutely targets the 'detail' view in the 'contacts' state. 
     // <div ui-view='detail'/> within contacts.html 
     "detail@contacts" : { }