Angular UI路由器 - 基于另一个UI视图更改子菜单的UI视图

Question

我有一个带侧栏（“菜单”）和主内容div（“main”）的根页面（index.html），所以两个ui-view divs - 一个叫做“菜单”和一个叫做“main”的菜单。

当主要内容区域包含网站列表（/ sites）时，我希望边栏成为通用菜单。我已经实现了这个采用了棱角分明的UI的“意见”属性的特定网址（即https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views）

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

当我点击一个特定的网站（/网站/：网址），我想与填充主要内容区域该网站的页面，并将菜单更新为网站选项的特定菜单。

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

有了这个，看着源时，可以正确生成的链接（HREF有/网站/），但点击一个链接时，没有任何反应 - 没有视图更新/改变。有没有更好的方法来尝试这个？孩子们的意见是否必须以某种方式相互沟通？

Answer 1

您必须正确引用视图。您可以使用绝对的命名在这种情况下：

$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