Angular JS not updating view on nested object

Question

I'm using the excellent AngularJS Rails Resources and with one object - which has deep nested objects in turn - when I update some of its properties, the updated property does not show on the template until I reload the page.

Let start from the beginning: here's my object:

    var invoice = Invoice.get($stateParams.invoiceId).then(function (result) {
      $scope.invoice = result;
    });

And here's how I open my modal to edit the values:

$scope.openEdit = function (edit) {
  $scope.editModal = $modal.open({
    templateUrl: 'editModalContent.html',
    controller: 'InvoiceShowController',
    size: 'lg'
  });
  $scope.editModal.result.then(function(select) {
  });
};

$scope.cancel = function () {
  $scope.$close();
};

$scope.ok = function () {
  $scope.invoice.update().then(function (result) {
    $scope.cancel();
    console.log(result);
  });
};

In my view I have the following:

...
<li>{{invoice.trading_details.trading_name}}</li>
<li>{{invoice.trading_details.trading_address_1}}</li>
...

In the modal body I have the following:

    ...
    <div class="form-group">
      <label for="exampleInputEmail1">Trading Name</label>
      <input ng-model="invoice.trading_details.trading_name" type="text" class="form-control" id="exampleInputEmail1">
    </div>
    <div class="form-group">
      <label for="exampleInputEmail1">Trading Address Line 2</label>
      <input ng-model="invoice.trading_details.trading_address_1" type="text" class="form-control" id="exampleInputEmail1">
    </div>
    ...

So when I edit the properties in the modal and console the object, the changes are there. When I save and get the result back, the changes are there, but for whatever reason the view is not updating.

Any ideas?

EDIT: My whole controller

I have a feeling that you have two different invoice objects on two different scopes. Could you try logging out $scope.$id in both view and modal? — BroiSatse
– BroiSatse, Commented Sep 15, 2015 at 13:31
@BroiSatse you're right. The ids are different. In this case, how can I pass the same $scope to the modal? One thing that beats me is in the Angular Bootstrap example why is there a need for two controllers? — WagnerMatosUK
– WagnerMatosUK, Commented Sep 15, 2015 at 13:58
Well, to be honest it doesn't prove anything. Modal is operating within its own scope which is a child of your view scope. This however means that your modal scope invoice is exactly some object as your view invoice unless you overridden it in your controller. Do you mind posting your InvoiceShowController as well? — BroiSatse
– BroiSatse, Commented Sep 15, 2015 at 14:21
Ok, as expected you have created invoice object on a child scope within your controller. That causes that you have two completely separate objects representing same data and also causing unnecessary backend call. I'll post an answer in a second. — BroiSatse
– BroiSatse, Commented Sep 15, 2015 at 14:54

mitch · Accepted Answer · 2015-09-15 20:01:42Z

2

It looks like you are missing the resolve setting. It passing data to your modal.

$scope.openEdit = function (edit) {
   $scope.editModal = $modal.open({
      templateUrl: 'editModalContent.html',
      controller: 'InvoiceShowController',
      size: 'lg',
      //notice a function is returning the data
      resolve: {
         invoice: function(){
             return  $scope.invoice;
         }
      }
  });
 };

EDIT Link to Plunker: http://plnkr.co/edit/IJvdBJrJngsNYaG39Gfh?p=preview

Notice how the resolve creates an instance invoice that is passed into the editCtrl.

UPDATE You can also do

   $scope.editModal = $modal.open({
      templateUrl: 'editModalContent.html',
      controller: 'InvoiceShowController',
      size: 'lg',
      //notice a function is returning the data
      resolve: {
         invoice: function(){
             return  Invoice.get($stateParams.invoiceId);
         }
      }
  });

...because the resolve can process a promise.

edited Sep 15, 2015 at 20:01

answered Sep 15, 2015 at 14:10

mitch

1,83115 silver badges14 bronze badges

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

2 Comments

mitch Over a year ago

Can you put {{invoice}} in your modal to see if it is assigned anything?

WagnerMatosUK Over a year ago

It is. It seems to be the whole invoice object.

Collectives™ on Stack Overflow

Angular JS not updating view on nested object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related