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)

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

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>时...显示所有四个嵌套的导航栏视图...”）与重复定义相关<强> 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" : { }

angularjs - ui.router兄弟姐妹国家

1 个答案: