angularjs - 如何在表单中更新 Angular 资源

Question

我有一个 AngularJS 应用程序，我在其中显示用户列表。用户被检索到

$resource.query()

可以通过单击列表来编辑用户，这会打开一个编辑弹出窗口。

如何更新资源，同时还允许用户取消编辑弹出窗口并恢复任何更改？

即，如果编辑弹出窗口直接与 $resource-retrived 对象一起使用，如果用户取消编辑，我如何“撤消”任何更改？

Answer 1

假设您在弹出元素上定义了一个 UserEditController 并且是 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>

如果您使用指令打开弹出窗口，您可以为指令定义一个控制器并在那里进行复制，这将使其可重用。