尽管在对服务器的非阻塞调用中保存存在问题，但模态关闭并且新记录出现在屏幕上

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>

尽管在对服务器的非阻塞调用中保存存在问题，但模态关闭并且新记录出现在屏幕上

Modal closes and new record appears to the screen despite of problems saving in a non-blocking call to the server

asynchronous

modal-dialog

node.js

angularjs

angularjs-scope