如何在不重新加载ui-view的情况下更新$ stateParams？角度ui路由器

Get the context, angular, ui-router, nothing special, a root view built with 3 named ui-views. so in index.html we have

获取上下文，角度，ui-router，没什么特别的，用3个命名的ui-views构建的根视图。所以在index.html中我们有

<body>
  <div ui-view='left'>
  <div ui-view='center'>
  <div ui-view='right'>
</body>

my route looks like

我的路线看起来像

$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@': .. }
 });

Is there a way in going to b state to update the $stateParams in the 'center' and 'left' view?? I can get it using a service but i need to add a $watch to the variable I need and it looks a little bit hacky to me.

有没有办法进入b状态更新'中心'和'左'视图中的$ stateParams？我可以使用服务获得它，但我需要为我需要的变量添加一个$ watch，它看起来有点hacky对我来说。

Going into c state I can actually get what I want, but the view is reloaded, and i wish to avoid this behaviour cause i have a canvas in the 'left' view.

进入c状态我实际上可以得到我想要的东西，但视图被重新加载，我希望避免这种行为，因为我在'左'视图中有一个画布。

3 个解决方案

#1

You could use the following to go to a specific route without reloading the views:

您可以使用以下内容转到特定路由而不重新加载视图：

$state.go('.', {parm1: 1}, {notify: false});

The last object literal represents the options which you can pass along to go. If you set notify to false, this will actually prevent the controllers from being reinitialized. The . at the beginning is the absolute state name or relative state path you wanna go to.

最后一个对象文字表示可以传递的选项。如果将notify设置为false，则实际上会阻止控制器重新初始化。这个。在开头是你想去的绝对州名或相对国家路径。

The important thing is the notify though.

重要的是通知。

#2

Quoting @christopherthielen from https://github.com/angular-ui/ui-router/issues/1758#issuecomment-205060258:

引用@christopherthielen来自https://github.com/angular-ui/ui-router/issues/1758#issuecomment-205060258：

using notify: false is almost never a good idea, and is now deprecated. Use reloadOnSearch if you must.

使用notify：false几乎不是一个好主意，现在已弃用。如果必须，请使用reloadOnSearch。

You can also try dynamic parameters in the 1.0 version (currently 1.0.0-alpha.3). In your state, configure a parameter as dynamic and implement the uiOnParamsChanged callback :

您还可以尝试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.
    }
  }
});

For a demo, have a look at this plunker: http://plnkr.co/edit/T2scUAq0ljnZhPqkIshB?p=preview

有关演示，请查看此plunker：http：//plnkr.co/edit/T2scUAq0ljnZhPqkIshB？p = preview

#3

I think that using "Dynamic params" is now a better solution:

我认为使用“动态参数”现在是一个更好的解决方案：

When dynamic is true, changes to the parameter value will not cause the state to be entered/exited. The resolves will not be re-fetched, nor will views be reloaded.

当dynamic为true时，更改参数值不会导致进入/退出状态。不会重新获取结算，也不会重新加载视图。

$stateProvider.state('search', {
   url: '/search?city&startDate&endDate',
   templateUrl: 'some/url/template.html',  
   params: {
      city: {
         value: 'Boston',
         dynamic: true
      }
   }
 }

and then:

接着：

$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

#1