How can i update $stateParams without reloading the ui-view? angular ui router

Question

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

<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.

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.

Teun Zengerink · Accepted Answer · 2016-06-23 08:12:16Z

33

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.

The important thing is the notify though.

edited Jun 23, 2016 at 8:12

Teun Zengerink

4,4235 gold badges33 silver badges32 bronze badges

answered Nov 2, 2015 at 18:39

LordTribual

4,2492 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeffrey Roosendaal Over a year ago

This somehow still causes all components in the view to $init and then immediately $destroy, which may lead to some serious performance issues. You can see if you add a console.log() to this.$onInit() and this.$onDestroy() within your components.

rtn Over a year ago

Controller is still re-instantiated using this method, $onInit is called.

Stefan Norberg Over a year ago

Dynamic params is the way to go.

Julien Malige · Accepted Answer · 2017-08-23 08:26:58Z

26

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.

$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

edited Aug 23, 2017 at 8:26

answered Jul 12, 2017 at 9:41

Julien Malige

3,5452 gold badges23 silver badges40 bronze badges

2 Comments

tkit Over a year ago

Thanks for the updated answer, but the question is how do we now differentiate between route changes caused by $state.go from your example (dynamic params) and somebody just going back by using the browser back button?

Biruel Rick Over a year ago

Thanks so much @julien-malige, I found any answer "all without dynamic tip" and when they spoke of dynamic, they had no example... your answer is complete! thanks!

ratbeard · Accepted Answer · 2016-08-16 18:08:24Z

11

Quoting @christopherthielen from 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.

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 :
.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

edited Aug 16, 2016 at 18:08

ratbeard

3173 silver badges6 bronze badges

answered Apr 13, 2016 at 14:04

Motin

5,1334 gold badges48 silver badges52 bronze badges

2 Comments

ako977 Over a year ago

Something that caught me off guard is that if you have views defined in the stateProvider definition, define your controller property in the views definition and not outside. Eg. in docs: ui-router.github.io/docs/latest/interfaces/…

views: {   header: {     controller: function() {     this.uiOnParamsChanged = function(changedParams, $transition$) {       ...     }   },     templateUrl: "header.html"   },   body: {     controller: "bodyCtrl",     templateUrl: "body.html"   },   footer: "footerComponent" }

Nate Anderson Over a year ago

The same github (before ChrstopherThielen comment) thread also discusses the hack/workaround of manually changing $stateParams[key]=value and calling $location.search(key, value)

Collectives™ on Stack Overflow

How can i update $stateParams without reloading the ui-view? angular ui router

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related