Question

我的左侧菜单需要在所有状态中保持不变，但每个州都可以选择使用右侧菜单，其中包含州选择的任何内容。现在，我已经通过使左侧菜单的内容成为每个州必须包含的自己的指令来实现这一点。它不是很干，左侧菜单会在各州重新加载。它有效，但它并不理想。

以下方法很直观，但不起作用，因为右侧菜单嵌套在离子导航视图中，而不是离子侧菜单的直接子级。

ion-side-menus
  ion-side-menu-content
    ion-nav-view // states want to include their own right side menu
  ion-side-menu(side="left")
    main-nav

// some-state.jade
some-directive
ion-side-menu(side="right") // side menu is broken because it's nested

如果右侧菜单是离子导航视图的直接子项，那么状态是否有办法决定其中的内容是什么？

ion-side-menus
  ion-side-menu-content
    ion-nav-view
  ion-side-menu(side="right")
    // side menu content here according to current state...
  ion-side-menu(side="left")
    main-nav

Answer 1

也许，我还没有完全理解问题的关键 - 如果是这样，我会删除这个答案。但是，在我看来，你发现直观的方法实际上是反直觉的。

我脑海中的直观方法（与ui.router如何使用命名视图一致）是首先定义应用程序的结构，然后定义每个状态将填充的视图。

我不熟悉离子，所以这是一个没有它的概念性例子：

<div>
  <div class="menu">
    <div class="left">
      left menu: same content for entire app
    </div>

    <div class="right">
      right menu
      <div ui-view="rightside">
    </div>
  </div>

  <!-- main content -->
  <div class="content" ui-view>
  </div>
</div>

然后，每个州都可以填充"rightside"视图：

.state("stateA", {
  views: {
    "": {
      template: "content of stateA"
    },
    "rightside": {
      template: "menu of stateA"
    }
  }
})
.state("stateB", {
  abstract: true,
  template: "<div ui-view></div>"
})
.state("stateB.B1", {
  views: {
    "": {
      template: "content of stateB.B1"
    },
    "rightside@": {
      template: "menu of stateB.B1"
    }
  }
})

stateA和stateB.B1在加载时会填充"rightside"视图。

当左侧菜单始终存在时，状态声明自己的右侧菜单

1 个答案: