javascript - angularjs - ui.router sibling states -

javascript - angularjs - ui.router sibling states -

i'm using bootstrap angularjs (and ui-router routing). have navbar each tab click need view nested navbar in it. nested navbar ui-view (should differently?). problem when click 1 li in main navbar, of 4 nested navbar views shown.

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)

and here 1 nested navbar (they same, except names):

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

and state configuration:

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

i'm using coffeescript , jade well.

the issue here ("...when click 1 <li>...all of 4 nested navbar views shown...") related repeated definition div(ui-view)

that means, in page dom contains 4 <div ui-view></div>. of them used target selected content. that's why can see rendered 4 times.

solution should in named views:

see: multiple named views

in our case, should utilize html definition

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

and utilize explicit views definitions of our states:

... .state('first_nested_navbar', { parent: 'main_nav_bar', url: '/first_nested_navbar', views : { 'first' : { // explicitly inject anchor/target "first" templateurl: 'first_nested_navbar.html' }, } }) .state('second_nested_navbar', { parent: 'mainnavbar', url: '/second_nested_navbar', views : { 'second' : { // here target ui-view="second" templateurl: 'second_nested_navbar.html' }, } })

check documented illustration here, see below snippet source:

$stateprovider .state('contacts', { // automatically plugged unnamed ui-view // of parent state template. since top level state, // parent state template index.html. templateurl: 'contacts.html' }) .state('contacts.detail', { views: { //////////////////////////////////// // relative targeting // // targets parent state ui-view's // //////////////////////////////////// // relatively targets 'detail' view in state's parent state, 'contacts'. // <div ui-view='detail'/> within contacts.html "detail" : { }, // relatively targets unnamed view in state's parent state, 'contacts'. // <div ui-view/> within contacts.html "" : { }, /////////////////////////////////////////////////////// // absolute targeting using '@' // // targets view within state or ancestor // /////////////////////////////////////////////////////// // absolutely targets 'info' view in state, 'contacts.detail'. // <div ui-view='info'/> within contacts.detail.html "info@contacts.detail" : { } // absolutely targets 'detail' view in 'contacts' state. // <div ui-view='detail'/> within contacts.html "detail@contacts" : { }

javascript angularjs angular-ui-router