Как обновить угловой ресурс в форме

Question

У меня есть приложение AngularJS, в котором отображается список пользователей. Пользователи извлекаются с

$resource.query() 

Пользователь может редактировать, нажав на список, который открывается редактируемое-всплывающее окно.

Как я могу обновить ресурс, а также разрешить пользователю отменить всплывающее окно редактирования и вернуть какие-либо изменения?

I.e Если редактирование-всплывающее окно работает непосредственно с объектом, полученным с помощью $ resource, как я могу «отменить» любые изменения, если пользователь отменяет редактирование?

Answer 1

Предполагая, что у вас есть UserEditController, определенный в вашем элементе popup, и является дочерним элементом UserController. Вы можете сделать копию пользователя при открытии всплывающего окна.

this.UserEditController = function($scope) { 
    var previous_attributes = angular.copy($scope.user) 

    var close = function() { 
     $scope.mode = 'show'; 
    } 

    $scope.cancel = function() { 
     angular.extend($scope.user, previous_attributes); 
     close(); 
    } 

    $scope.save = function() { 
     $scope.user.save(); 
     close(); 
    } 

} 

HTML-

<div class="user" ng-controller="UserController"> 
    <strong>{{ user.name }}</strong> 
    <button ng-click="editUser()">Edit</button> 


    <ng-switch on="mode"> 
    <div ng-switch-when="edit" class="edit-user form" ng-controller="UserEditController"> 
     <input type="text" ng-model="user.name"> 
     <button ng-click="cancel($event); $event.preventDefault();">Cancel</button> 
     <button ng-click="save($event); $event.preventDefault();">Save</button> 
    </div> 
    </ng-switch> 

</div> 

Если вы используете директиву, чтобы открыть всплывающее окно, вы можете определить контроллер для директивы и сделать копирование там, что будет делать это повторно.