AngularJS UI-Router: two way binding between allowed object in child / parent state - child state will not update

I have a parent state and a child state. The parent state resolves the object. The child state then resolves that object from the parent state.

Since the child state resolves the object from the parent state, I expect two way binding to occur. And oddly enough, although changes from the child state (i.e., property additions) update the object in the parent state - changes to the object in the parent state do not affect the resolved object in the child state, which surprised me.

I know I could just change $broadcast

in the resolved object in the parent state the child state, but I would like to understand why the resolved object in the child state is not automatically updated.

This is what I work with. Parent's 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 the 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;          
    }        
  });
});

      

Is it included resolve

in child state when instantiated? Those. when the child state resolves an object from the parent state, is it no longer listening for changes to the resolved object? It doesn't seem like it should be.

PLNKR may be disabled - my code won't work for unknown reasons: http://plnkr.co/edit/EjV4TtSIP6HpVMG0oanL?p=preview

Any direction or understanding is appreciated. Thank!

+3


source to share


1 answer


All your expectations are correct. And there is a bit adjusted plunker that works.

The most important change is to make the shared object a real object (not a 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;
       }]
    }

      

Basically the lines:



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

      

Thus, it becomes a reference object. This means that the parent and child will pass a reference to this object. And in fact - if someone changes this (add a property, change this property) - everyone will know about the change ... because they share a reference to ONE object $scope.object

Check here

+6


source







All Articles