模式关闭，新记录显示在屏幕上，尽管在对服务器的非阻塞调用中保存时出现问题

Question

问题陈述：当异步服务器调用出现问题时，如何防止模型关闭和调用方屏幕更新？例如，假设我有一个屏幕，在这样的屏幕上列出书籍。它还允许执行 CRUD 操作。创建和更新新模态时，会打开一个新控制器。

这是 HTML：

<li ng-repeat="book in books">
  <div ng-click="updateBookModelOpen('lg', book, $index)">
    <p class="text-center">{{book.name}}</p>
  </div>
  <div class="row text-center">
    <a ng-click="remove(book)" class="undecorated-link">
      <button class="btn btn-danger">Delete</button>
    </a>
  </div>
</li>
    <button ng-click="createBookModelOpen('lg')" class="btn btn-primary">Add Your Book</button>

这是打开模态的逻辑，假设这是在 BooksController 中：

 this.createBookModelOpen = function(size) {
   var modalInstance = $modal.open({
     templateUrl: 'create-book.html',
     controller: 'CreateBookModalController',
     backdrop: 'static',
     keyboard: false,
     size: size,
     scope: $scope
   });
   modalInstance.result.then(function(book) {
     this.books.push(book);
   }, function() {
     $log.info('Modal dismissed at: ' + new Date());
   });
 };

下面是模态控制器的逻辑：

.controller('CreateBookModalController', ['$scope', '$modalInstance',
  function($scope, $modalInstance) {
    $scope.ok = function(book) {
        $modalInstance.close(book);
    };
    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };
  }
])

下面是模态 HTML：

<section data-ng-controller="CreateBooksController as createBooksCtrl" ng-init="createBooksCtrl.init()">
  <div class="modal-header">
    <h3 class="modal-title">Enter Book Details</h3>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-12">
        <form class="form-horizontal" name="createBookForm" novalidate>
          <fieldset>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <input type="text" data-ng-model="book.name" id="name" class="form-control" placeholder="Book Name" required>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="row">
      <div class="col-md-12">
        <div class="pull-right">
          <button class="btn btn-primary" ng-click="cancel()">Don't Save & Close</button>
          <button class="btn btn-primary" ng-click="createBooksCtrl.create(book); ok(book)">Save & Close</button>
        </div>
      </div>
    </div>
  </div>
</section>

这是我的CreateBooksClientController：

this.create = function(book) {
  book.$save(function(response) {
  }, function(errorResponse) {
      this.errors.push(errorResponse.data.messages);
  });
};

当前的行为是，当我尝试保存名称被服务器拒绝的书籍时。我从服务器收到一个错误，但由于此调用是非阻塞的，因此继续执行 ok（），因为 ok（） 是这里的下一个顺序。

<button class="btn btn-primary" ng-click="createBooksCtrl.create(book); ok(book)">Save & Close</button>

该书不会保存在数据库中。但是我的模态关闭了，新书因此显示在屏幕上：

modalInstance.result.then(function(book) {
  this.books.push(book);
}, function() {
  $log.info('Modal dismissed at: ' + new Date());
});
};

理想情况下，它不应该显示在此处的列表中，因为它尚未保存到数据库中。

<li ng-repeat="book in books">
  <div ng-click="updateBookModelOpen('lg', book, $index)">
    <p class="text-center">{{book.name}}</p>
  </div>
</li>

预期结果：当服务出现错误时，模式不应关闭，ok（） 调用不应继续。如果新书未保存到数据库中，则列表不应显示新书。你们如何处理这种情况？任何帮助将不胜感激。

Answer 1

如果你不需要专门使用 CreateBooksClientController ，你可以在模态控制器中调用book.$save，如下所示：

.controller('CreateBookModalController', ['$scope', '$modalInstance', '$http'
  function($scope, $modalInstance, $http) {
    $scope.ok = function(book) {
        book.$save(function(response) {
            $modalInstance.close(book);
        }, function(errorResponse) {
            // Error handling
        })
    };
    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };
  }
])

可能必须相应地更改错误处理。然后确定按钮将只是：

<button class="btn btn-primary" ng-click="ok(book)">Save & Close</button>