1

ユーザーのリストを表示するAngularJSアプリケーションがあります。ユーザーは

$resource.query()

ユーザーは、リストをクリックして編集ポップアップを開くことで編集できます。

ユーザーが編集ポップアップをキャンセルして変更を元に戻すことを許可しながら、リソースを更新するにはどうすればよいですか?

つまり、edit-popup が $resource-retrieved オブジェクトで直接動作する場合、ユーザーが編集をキャンセルした場合、どのように変更を「元に戻す」ことができますか?

4

1 に答える 1

3

ポップアップ要素に定義された 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>

ディレクティブを使用してポップアップを開く場合は、ディレクティブのコントローラーを定義し、そこでコピーを実行すると、再利用可能になります。

于 2013-05-15T18:57:15.433 に答える