javascript - angularjs - ui.router 兄弟状态

Question

我正在使用 bootstrap 和 angularjs(以及用于路由的 ui-router)。
我有一个 navbar，每个选项卡单击都需要在其中查看另一个嵌套的 navbar。嵌套的 navbar 是一个 ui-view(我应该做不同的吗？)。
问题是，当我在主导航栏中单击一个 li 时，会显示所有四个嵌套的导航栏 View 。

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)

这是一个嵌套的导航栏(它们看起来都一样，除了名称):

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> ...显示所有四个嵌套导航栏 View ...”) 与重复定义相关 div(ui-view)

这意味着，在页面 DOM 中包含 4 <div ui-view></div> .所有这些都用作选定内容的目标。这就是为什么我们可以看到它被渲染了四次。

解决方案应该在命名 View 中:

参见: 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"
...

并使用我们状态的显式 View 定义:

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