angularjs ui-router - 如何切换 `ui-view`

Question

我想在 parent-view 上有一个按钮来打开和关闭 ui-view。就像 ng-show 的工作原理一样。我该怎么做？

一个想法是将 empty.html（即空）作为子视图，并在我们想要隐藏 ui-view 时调用它。但我相信应该比这更好。

Answer 1

你试过实际使用 ng-show 吗？您可以将 ng-show 应用于包含 ui-view 的 div，并在您的控制器中引用一个函数，该函数在 ng-click 按钮时将其设置为 false。

Answer 2

如您所料和建议 - UI-Router 的本机解决方案是 - 状态嵌套。因此，parent 或某些 child 只会隐藏该视图：

Parent

.state('parent', {
  views: {
    '': { templateUrl: parent.html},
    'toggle@parent': {templateUrl: notEmpty.html },
  }
  ...

Child

.state('parent.child', {
  views: {
    'toggle': {templateUrl: Empty.html }, // now it is hidden
  }
  ...

有类似的问答和工作示例

angularjs ui-router - How to toggle `ui-view`