javascript - Angular UI Router - 根据另一个 ui-view 更改子菜单 ui-view

Question

我有一个根页面(index.html)，带有侧边栏(“菜单”)和主要内容 div(“主”)，因此有两个 ui-view div - 一个称为“菜单”，一个称为“主”。

当主要内容区域有网站列表 (/sites) 时，我希望侧边栏成为通用菜单。我已经使用 Angular-ui 的“views”属性为特定的 url 实现了这一点(即 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views )

$stateProvider
  .state('sites', {
    views: {
      'main': { ... list of sites template ... },
      'menu': { ... generic menu template ...},
    }
  })

当我单击特定网站 (/sites/:siteName) 时，我希望使用该网站的页面填充主要内容区域，并将菜单更新为网站选项的特定菜单。

$stateProvider
  .state('sites.detail', {
    views: {
      'main': { ... sites.detail template ...},
      'menu': { ... specific site options menu ...},
    }
  })

这样，在查看源(href 有/sites/)时会正确生成链接，但单击链接时不会发生任何情况 - 不会更新/更改任何 View 。有更好的方法来尝试这个吗？ subview 必须以某种方式相互通信吗？

Answer 1

您必须正确引用 View 。在这种情况下您可以使用绝对命名:

$stateProvider
  .state('sites.detail', {
    views: {
      'main@sites': { ... sites.detail template ...},
      'menu@sites': { ... specific site options menu ...},
    }
  })

更多信息: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views