Angularjs UI-router controller not update after resolve

Question

I have a problem with using ui-router in Angularjs. The scenario is very simple, I have a list of users, when I click on the user's name, the view will jump to the edit form (this one is also the create-new-user form).

But the problem is, the returned value after resolving on the edit state doesn't change. Seem like the controller doesn't update on new state. *(tried with $state.reload on my real project but no success )

Here is my plnkr for reference: http://plnkr.co/edit/Gv8sQk7ixfni6tzhqjn3

And here is my config on routing:

$stateProvider
    .state('list',{
      url:'/',
      templateUrl:'list.html',
      controller:'mainCtrl',
      resolve:{
        listUser: function(userService){
          return userService.list();
        }
      }
    })
    .state('user',{
      url:'/user',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService){
          // Init a new "User" object
          console.log("New user");
          return "New name";
        }
      }
    })
    .state('user.edit',{
      url:'/:id',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService, $stateParams){
          // Return the user 
          console.log("Edit user ", userService.get($stateParams.id));
          return userService.get($stateParams.id);
        }
      }
    });

The reason why I made all necessary objects in the resolve step is after reading this article, Advanced routing and resolves, I found myself in that loop where I do all the request things in controller, and of course, duplicated code is one thing I can't avoid. So, I tried to make it better by changing the way I handle the data, but now got stuck.

Can anyone point me out where I'm going wrong ? Would really appreciate it alot.

What happens is the resolve function of the user state is called after the user.edit one, and override it. — Rémi Becheras
– Rémi Becheras, Commented Aug 28, 2014 at 12:35

Radim Köhler · Accepted Answer · 2014-08-28 13:10:40Z

1

I would say, that your idea is not bad. If we should follow it, I would make user_new and user_edit states siblings. See updated version

.state('user_new',{
      url:'/user',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService){
          // Init a new "User" object
          console.log("New user");
          return "New name";
        }
      }
    })
.state('user_edit',{
      url:'/:id',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService, $stateParams){

          // Return the user 
          console.log("Edit user ", userService.get($stateParams.id));
          return userService.get($stateParams.id);
        }
      } 
    })

And the, we can edit existing on user_edit and create new on user_new. These two states in fact do not need to be parent - child, and resolver therefore can pass different userObj into each...

Check it here

answered Aug 28, 2014 at 13:10

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

Duc Hong Over a year ago

thanks for the updated version, but actually what you did was to create 2 separate states (one for new and the other for editing), not child-to-parent relation right ? I guess that's the way it is

Radim Köhler Over a year ago

Exactly this is in my answer: instead of parent-child, I created siblings (brother and sister). And now we can profit from one controller, but two different resolvers... is not it awesome? ;) ;)

Community · Accepted Answer · 2017-05-23 12:06:29Z

1

What happens is the resolve function of the user state is called after the user.edit one, and override it.

It seems it's an issue referenced here : https://github.com/angular-ui/ui-router/issues/868

You can get some additionnal information here https://github.com/angular-ui/ui-router/issues/78 and here Promise dependency resolution order in angular ui-router

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Aug 28, 2014 at 12:45

Rémi Becheras

15.3k14 gold badges55 silver badges85 bronze badges

2 Comments

Duc Hong Over a year ago

yes I can tell that by checking out the console.log, the one in user.edit actually did run once, but the returned value was overridden in the end. wondering about this line of documentation,

"Child states inherit views (templates/controllers) and resolved dependencies from parent state(s), which they can override."

Rémi Becheras Over a year ago

Yes, i think this is why its an opened issue.

Collectives™ on Stack Overflow

Angularjs UI-router controller not update after resolve

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related