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, Aug 28 '14 at 12:35

score 1 · Answer 1 · edited May 23 '17 at 12:06

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 '17 at 12:06

Community

1
1

answered Aug 28 '14 at 12:45

Rémi Becheras

14,902
14
51
81

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."` – Duc Hong Aug 28 '14 at 12:54
Yes, i think this is why its an opened issue. – Rémi Becheras Aug 28 '14 at 13:25

score 1 · Accepted Answer · answered Aug 28 '14 at 13:10

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

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 — Duc Hong, Aug 28 '14 at 13:15
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? ;) ;) — Radim Köhler, Aug 28 '14 at 13:21

Angularjs UI-router controller not update after resolve

2 Answers2