获取上下文,angular,ui-router,没什么特别的,用3个命名的ui-views构建的根视图。
所以index.html
我们有
<body>
<div ui-view='left'>
<div ui-view='center'>
<div ui-view='right'>
</body>
我的路线看起来像
$stateProvider
.state('main', {
url: '/',
views: {
'left': {templateUrl: 'foo.html'},
'center': {templateUrl: 'bar.html'},
'right': {templateUrl: 'xyz.html'}
}
})
.state('main.b', {
url: '/b',
params: { foo: {value: 'bar'} }
views: { 'right@': {templateUrl: '123.html'} } // I wish to update $stateParams in 'left@' view
})
.state('main.c', {
url: '/c',
params: ...
views: { 'left@': ..., 'center@': ..., 'right@': .. }
});
有没有办法在b状态下更新&#39;中心的$ stateParams&#39;并且&#39;离开&#39;视图??我可以使用服务来获取它,但我需要在我需要的变量中添加$watch
,它对我来说看起来有些笨拙。
进入c状态我实际上可以得到我想要的东西,但视图被重新加载,我希望避免这种行为,因为我在左边有一个画布&#39;图。
答案 0 :(得分:30)
您可以使用以下内容转到特定路线,而无需重新加载视图:
$state.go('.', {parm1: 1}, {notify: false});
最后一个对象文字表示可以传递给go
的选项。如果将notify
设置为false
,则实际上会阻止控制器重新初始化。开头的.
是您想要的绝对州名或相对州路径。
重要的是notify
。
答案 1 :(得分:15)
我认为使用&#34; Dynamic params&#34;现在是一个更好的解决方案:
当dynamic为true时,更改参数值不会导致输入/退出状态。不会重新获取结算,也不会重新加载视图。
$stateProvider.state('search', {
url: '/search?city&startDate&endDate',
templateUrl: 'some/url/template.html',
params: {
city: {
value: 'Boston',
dynamic: true
}
}
}
然后:
$state.go('.', {city: 'London'});
https://ui-router.github.io/ng1/docs/latest/interfaces/params.paramdeclaration.html#dynamic https://github.com/angular-ui/ui-router/issues/2709
答案 2 :(得分:9)
从https://github.com/angular-ui/ui-router/issues/1758#issuecomment-205060258引用@christopherthielen:
使用notify:false几乎不是一个好主意,现在是 弃用。如果必须,请使用reloadOnSearch。
您还可以尝试1.0版本中的动态参数(目前 1.0.0-alpha.3)。在您的状态下,将参数配置为动态并实现uiOnParamsChanged回调:
.state('foo', { url: '/:fooId', params: { fooId: { dynamic: true } }, controller: function() { this.uiOnParamsChanged = function(changedParams, $transition$) { // do something with the changed params // you can inspect $transition$ to see the what triggered the dynamic params change. } } });
要获得演示,请查看此plunker:http://plnkr.co/edit/T2scUAq0ljnZhPqkIshB?p=preview