好的,我对angular和ui-router有相当多的经验,但是当涉及到我的app的架构时,我遇到了一个问题。我有一些州:
main.module.js
.state('main', {
abstract: true,
controller: 'MainCtrl',
template: '<div ui-view />'
}).state('main.clients', {
url: '/clients/:id',
views: {
list: {controller: 'ClientListCtrl', templateUrl: 'client-list.html'},
detail: {controller: 'ClientDetailCtrl', templateUrl: 'client-detail.html'}
}
}.state('main.services', {
url: '/services/:id',
views: {
list: {...},
detail: {...}
}
}
main.html中
<div>
<div ui-view='list'></div>
<div ui-view='detail'></div>
</div>
客户list.html
<ul>
<li data-ng-click='$state.go('main.clients({id: client.id})'
data-ng-repeat='client in clients'>
{{client.name}}
</li>
</ul>
这一切似乎都运行良好,并且视图填充正如我所期望的那样。我的主要问题是,当我处于main.clients
状态且用户点击客户端名称时,$state.go(...)
会触发,它会重新初始化ClientListCtrl
和ClientDetailCtrl
,即使状态实际上没有改变(好吧,网址的:id
部分也是如此)。
我滥用多个观点了吗?建筑的变化是否可取?只是试图以最有效的方式围绕如何构造它,并且在这种情况下控制器重新初始化似乎不是必要的,但我可能错过了一些东西。谢谢!
答案 0 :(得分:1)
在99%的情况下,重新加载状态或其参数更改是我们想要的(我会说)。新的参数意味着不同的列表/细节。
但有一个设定:
布尔 (默认为true) 。如果false因为搜索/查询参数已更改而不会重新触发相同的状态。当您想要修改$ location.search()而不触发重新加载时很有用。
我创建了an example here,展示了如何在搜索时关闭重新加载。
片段:
.state('index', {
url: '/index/:area',
...
})
.state('index.detail', {
url: '/detail/:id',
reloadOnSearch : false,
...
会说,即使使用解析器,默认行为也是我们所需要的。但是......检查行动中的变化here