AngularJS - Сбросить состояние связанного объекта

Question

Я сделал очень простой повтор некоторых книг, когда пользователь щелкает книгу, он открывает новый модальный. Где они могут редактировать книгу. Поскольку я использую двустороннюю привязку, «отображаемая страница» автоматически изменяется, когда я печатаю на модальном, что является блестящим.

Однако я хочу, чтобы пользователь нажал кнопку отмены, и состояние книги вернется к тому, что было до того, как оно было изменено. Возможно ли это в Angular без возврата и сброса всего объекта $ scope.books?

В реальном приложении это будет вызов API, и я бы предпочел не звонить другому серверу, если это не обязательно, конечно. Есть ли образец, который позаботится об этом уже?

(function(){ 
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal, $log){ 

     $scope.books = [ 
      { Id: 1, Name:'A Feast For Crows'}, 
      { Id: 2, Name:'Before they are Hanged'} 
     ]; 

     $scope.openModal = function (currentBook) {    
      var modalInstance = $modal.open({ 
       templateUrl: 'SomeModal.html', 
       controller: [ 
        '$scope', '$modalInstance', function($scope, $modalInstance){ 
         $scope.editBook = currentBook; 
         $scope.saveModal = function (book) { 
          $modalInstance.close(); 
         }; 
         $scope.cancelModal = function() { 
          // Restore the previous state here! 
          $modalInstance.close(); 
         }; 
        }] 
      }); 
     }; 
    }) 
})(); 

<div ng-controller="formController"> 

    <p ng-repeat="displayBook in books"> 
     <a href="#" ng-click="openModal(displayBook)">{{displayBook.Name}}</a> 
    </p>  

    <script type="text/ng-template" id="SomeModal.html"> 
     <form name="editForm" ng-submit="saveModal(editBook)" noValidate> 
      <div class="modal-header"> 
       Name: <input ng-model="editBook.Name" required /><br /> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-warning" ng-click="cancelModal()">Cancel</button> 
       <button class="btn btn-info" ng-disabled="editForm.$dirty && editForm.$invalid">Save</button> 
      </div> 
     </form> 
    </script> 
</div> 

Answer 1

Вы можете создать глубокую копию объекта к температуре, а затем установить его обратно, если необходимые:

var temp = angular.copy(currentBook); 
$scope.editBook = currentBook; 
$scope.saveModal = function (book) { 
    $modalInstance.close(); 
}; 
$scope.cancelModal = function() { 
    // Restore the previous state here! 
    angular.copy(temp, $scope.editBook); 
    $modalInstance.close(); 
}; 

Answer 2

Угловых имеет метод copy, что делает работу для вас клонировать объект или массив.

Идея состоит в том, чтобы передать копию ваших данных в модальные, а не на сам экземпляр. Поэтому, когда пользователь нажимает Cancel, основной экземпляр не изменяется.

В вашем случае вместо:

$scope.editBook = currentBook; 

пишут:

$scope.editBook = angular.copy(currentBook); 

Answer 3

Рассмотрим кэширование копию исходной модели перед отображением модального, а затем сбросить его, если пользователь отменяет. Это можно легко сделать непосредственно в JavaScript, или вы можете использовать Angler's $cacheFactory для более сложных сценариев.

Например, вы можете добавить индекс к вашему ng-repeat:

<p ng-repeat="displayBook in books track by $index"> 
    <a href="#" ng-click="openModal(displayBook, $index)"> 
      {{displayBook.Name}} 
    </a> 
</p> 

А затем изменить свой метод контроллера для сброса $scope.books коллекции, если пользователь отменяет модальность:

$scope.openModal = function (currentBook, idx) {    
    // Cache the book, so that we can reset it later. 
    var cachedBook = angular.copy(currentBook); 
    var $outerScope = $scope; 

    var modalInstance = $modal.open({ 
     // ... 
     controller: [ 
      '$scope', '$modalInstance', function($scope, $modalInstance){ 
       $scope.editBook = currentBook; 
       $scope.saveModal = function (book) { 
        // ... 
       }; 
       $scope.cancelModal = function() { 
        // Restore the previous state 
        $outerScope.books[idx] = cachedBook; 

        // ... 
       }; 
      }] 
    }); 
}; 

Если вы ожидайте, что ваши пользователи будут бить Cancel чаще, чем они фактически сохраняют изменения, а затем, возможно, подумайте о том, чтобы обратить вспять операции и передать в копии книги вместо оригинала, только изменить оригинал после saveModal.