Javascript angularjs-ui.router同级状态

我正在使用

bootstrap

和

angularjs

（和

ui路由器

进行路由）。
我有一个

navbar

，每个选项卡单击后都需要查看其中的另一个嵌套

navbar

。 嵌套的

navbar

是一个ui视图（我应该用不同的方式吗？。
问题是，当我在主导航栏中单击一个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)

这里有一个嵌套的导航栏（除了名称外，它们看起来都一样）：

和我的状态配置：

 $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

。

这里的问题（“…当我单击一个

…显示四个嵌套的导航栏视图时…”）与重复定义

div（ui视图）

这意味着，在页面中，DOM包含4个

。它们都用作选定内容的目标。这就是为什么我们可以看到它被渲染了四次

解决方案应位于命名视图中：

请参阅：

在我们的例子中，我们应该使用这个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'
      },
    }
  })

查看文档非常丰富的示例，请参阅该源代码中的以下代码片段：

$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" : { }

$stateProvider
.状态（“联系人”{
//这将自动插入未命名的ui视图
//父状态模板的。由于这是顶级状态，
//它的父状态模板是index.html。
templateUrl:'contacts.html'
})
.state（'contacts.detail'{
观点：{
////////////////////////////////////
//相对目标//
//目标为父状态ui视图的//
////////////////////////////////////
//相对地以该状态的父状态“联系人”中的“详细信息”视图为目标。
//在contacts.html中
“细节”：{}，
//相对地以该状态的父状态“contacts”中的未命名视图为目标。
//在contacts.html中
"" : { }, 
///////////////////////////////////////////////////////
//使用“@”的绝对目标定位//
//以该状态或祖先中的任何视图为目标//
///////////////////////////////////////////////////////
//绝对针对此状态下的“info”视图“contacts.detail”。
//在contacts.detail.html中
"info@contacts.detail" : { }
//绝对以“联系人”状态下的“详细信息”视图为目标。
//在contacts.html中
"detail@contacts" : { }

刚刚找到了什么是翡翠。很酷，谢谢。很好地解释了。解决了。谢谢！很高兴看到：）享受很棒的ui路由器：）

$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" : { }