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.

Answer 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