CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerresolve
Duc Hong
Duc Hong

Reputation: 1179

Angularjs UI-router controller not update after resolve

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.

Upvotes: 1

Views: 1728

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123861

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

Upvotes: 1

Rémi Becheras
Rémi Becheras

Reputation: 15222

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

Upvotes: 1

Related Questions