AngularJS UI-Router: Two way binding between resolved object in child/parent state—Child state won't update

Question

I have a parent state and a child state. The parent state resolves an object. Then, the child state resolves that object from the parent state.

Because the child state is resolving the object from the parent state, I would expect two-way binding to occur. And oddly, although changes from the child state (i.e, adding a property), update the object in the parent state—changes in the object in the parent state are not affecting the resolved object in the child state, which surprised me.

I know that I could just $broadcast changes in the resolved object in the parent state to the child state, but I would like to understand why the resolved object in the child state is not being updated automatically.

Here's what I'm working with. Parent state:

.config(function($stateProvider) {
  $stateProvider.state('parent', {
    template:  ''
    +'  <div>Parent State</div>'
    +'    <div>Modify property on parent state, object.someProperty:'
    +'      <input ng-model="object.someProperty">'
    +'        {{object.someProperty}}'
    +'    </div>'
    +'  </div>' 
    +'  Include Child State'
    +'  <ui-view></ui-view>',
    controller: function($scope) {

      $scope.object = object;

    },
    resolve: {
       object: [function() {
         var object = '';
         object.someProperty = 'initialValue';
         return object;
       }]
    }
  })

And child state:

  .state('parent.child', {
    template: ''
    +'  <div>Child State</div>'
    +'    <div>Watch property from parent state, object.someProperty'
    +'        {{object.someProperty}}'
    +'    </div>',
    resolve: {
      objectFromParent: ['object', function(object) {
        return object;
      }]
    },
    controller: function(objectFromParent) {

      $scope.objectFromParent = objectFromParent;          
    }        
  });
});

Does the resolve in the child state only occur on instantiation? Ie.—once the child state resolves the object from the parent state, it is no longer listening for changes to the resolved object? It doesn't seem like that should be the case.

PLNKR might be bugging out—my code won't work for unknown reasons: http://plnkr.co/edit/EjV4TtSIP6HpVMG0oanL?p=preview

Any direction or insight is appreciated. Thank you!

I doubt this is causing the problem you are experiencing, but thought I'd mention: When you resolve something in a parent state, you don't need to re-resolve it in child states. The resolved object can be injected into the controller of any child state, e.g. you can delete the resolve block in the child state and just inject object into the child state's controller. — Sunil D.
– Sunil D., Commented May 31, 2015 at 21:00
Thanks for the feedback! I actually didn't know that—doesn't fix the problem, but helpful to know :-) — nikk wong
– nikk wong, Commented May 31, 2015 at 21:56

Radim Köhler · Accepted Answer · 2015-06-01 07:14:46Z

6

All your expectations are correct. And There is a bit adjusted plunker which is working.

The most important change is making the shared object a real object (not string)

$stateProvider.state('parent', {
    url: '/parent',
    template:  ...,
    controller: function($scope, object) {        
      $scope.object = object;       
    },
    resolve: {
       object: [function() {
         //var object = '';
         var object = {};
         object.someProperty = 'initialValue';
         return object;
       }]
    }

Mostly the lines:

//var object = '';
var object = {};

This way, the $scope.object becomes a reference object. It means, that parent and child will share reference to that object. And in deed - if anyone will change that (add property, change that property) - all will know about the change... because they share reference to ONE object

Check it here

answered Jun 1, 2015 at 7:14

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

4 Comments

Pushkar Kathuria Over a year ago

Amazing. Just curious. What if controller is in the different file?

Radim Köhler Over a year ago

@PushkarKathuria Any issue with such controller? I created a plunker for you plnkr.co/edit/6Qg2EF45vWNPZJ67YWAq?p=preview. Does it help a bit?

Pushkar Kathuria Over a year ago

Well, The problem I am facing is that I am fetching data from http request(promise). On the controller side I am injecting object setting it to an object that is attached to vm. What is happening here that on click of a button I am opening a modal box closing which should update the values on underlying screen. I hope I am able to make you understand. Kindly assist. Or I can share a plunkr later today.

Radim Köhler Over a year ago

@PushkarKathuria I'd strongly suggest.. raise a question. Add link to this post, if needed. I am sure you will get larger audience than me... (pretty busy ;( these days). I do believe that way could give you the most ... (plunker added to such question.. as you suggest is a must)

Collectives™ on Stack Overflow

AngularJS UI-Router: Two way binding between resolved object in child/parent state—Child state won't update

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related