CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Martijn
Martijn

Reputation: 24809

Why is angular not updating my model

In my (table) overview I have custom directive. This directive shows customer details and contains an edit button. When this button is clicked a edit form pops up. When I change values of the customer I see that the details are also updated. This is off course because of the binding and is exactly what I want.

But, when I press cancel on the edit form, I want to restore the original values and this is what I don't get to work. The problem is that the details contains the edited values, the edited values aren't restored.

I've created a plunker which contains the important pieces of my code. It doesn't work, but it should give an idea of how I have set everything up.

The plunker

var module = angular.module('app', []);

module.directive('customerDetails', function ($http, CustomerService) {
  return {
      restrict: 'E',
      templateUrl: '/Customer/View',
      scope: {
          customerId: '=',
          showEditCustomerForm: '&customerEditForm'
      },
      link: function (scope, element, attr) {
          scope.customerData = {};

          CustomerService.getCustomerById(scope.customerId).then(function (response) {
              scope.customerData.customer = response;
          });
      }
  }
});

module.controller('DemoCtrl', function ($scope) {
  $scope.showEditCustomerForm = function (customer) {
      $scope.customerFormData = {};
      $scope.customerFormData.customer = customer; 
      $scope.customerFormData.originalCustomer = angular.copy(customer);

      $scope.showAddCustomer = true;
      $scope.showOverlay = true;
  };

  $scope.hideAddCustomerForm = function (restoreOriginal) {

    if (restoreOriginal) {
      // Here I want to restore the original customer to discard the changes, but this doesn't work
      // The View is not updated
      $scope.customerFormData.customer = $scope.customerFormData.originalCustomer;
    }

    $scope.showAddCustomer = false;
    $scope.showOverlay = false;
  }
});

<body ng-controller="DemoCtrl">
  <table>
    <tbody id="customerRows" data-ng-repeat="customer in customers">
      <tr>
        <td>
          <customer-Details customer-Id="customer.Id" customer-edit-form="showEditCustomerForm(customer)"></customer-Details>
        </td>
      </tr>
    </tbody>
  </table>

  <div data-ng-switch="showAddCustomer">
    <div data-ng-switch-when="true">
        <div class="overlay">
        </div>
        <div ng-include="'/Customer/Add'"></div>    
    </div>
  </div>
</body>

Upvotes: 1

Views: 532

Answers (1)

Martijn
Martijn

Reputation: 24809

@finishingmove: You were very close. I finally have the answer.

Instead of doing

$scope.customerFormData.customer = angular.copy($scope.customerFormData.originalCustomer);

I had to do

angular.copy($scope.customerFormData.originalCustomer, $scope.customerFormData.customer);

For an explanation see:

Why does Angular not databind data when an object is copied from another object? and Dirty checking with shared service between controllers, One way works the other does not?

Upvotes: 2

Related Questions