如何更新表單中的角度資源

Question

我有一個AngularJS應用程序，用於顯示用戶列表。用戶可以用

$resource.query() 

用戶可以通過點擊列表進行編輯，該列表打開編輯彈出窗口。

如何更新資源，同時也允許用戶取消編輯彈出並恢復任何更改？

也就是說，如果edit-popup直接與$ resource-retrieve對象一起工作，如果用戶取消編輯，如何「撤消」任何更改？

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> 

如果您使用的是指令打開彈出窗口，你可以定義指令的控制器，做拷貝存在，這將使其可重複使用。