Question

我的页面遇到了一个非常奇怪的问题。我正在编辑交易，在页面上我可以保存更改或删除项目。当互联网非常慢时，用户可以选择删除按钮，然后在页面更改之前按下保存按钮。这会导致某些变量无法设置并导致服务器崩溃。

这是页面，非常简单。

<div class="container">
<div class="banner">Changes</div>
<div>
    <label class="item">Date</label><br>
    <input ng-model = "trans.mDate" type="datetime-local" required>
</div>
<div>
    <label class="item">What</label><br>
    <input ng-model = "trans.mDescr" type="text" required>
</div>
<div style="border-bottom: 2px solid rgba(105,240,174,.5);margin-bottom: 20px;width: 90%;">
   <input ng-model="trans.m_type" id="Credit" value="Credit" type="radio" style="background:#00E676;width:5%;"/>
   <label for="Credit" style="color: #00E676;width:25%">Credit</label>
   <input ng-model="trans.m_type" id="Debit" value="Debit" type="radio" style="background:#FF1744;width:5%;"/>
   <label for="Debit" style="color: #00E676;">Debit</label>
</div>
<div>
    <label class="item">How Much</label><br>
    <input ng-model = "trans.mAmt" type="number" required>
</div>
<button type="button" class="third-btn" ng-click="save(trans)">Save</button>
<button type="button" class="third-btn third-delete-btn" ng-click="delete(trans)">Delete</button>
<button type="button" class="third-btn third-cancel-btn" ng-click="cancel()">Cancel</button>

我知道正在选择编辑按钮，因为这是它进入该路线的唯一方式。

Mongoose: m_trans.findOne({ _id: ObjectId("*************") }) { fields: undefined }  
Mongoose: m_trans.remove({ _id: ObjectId("*************") }) {}  
172.1.1.1 - - [30/Mar/2016:20:46:56 +0000] "DELETE /trans/**************      HTTP/1.1" 200 0 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X)     AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12H143 (391228672)"
 Mongoose: m_trans.findOne({ _id: ObjectId("*************") }) {   fields: undefined }  
 Wed Mar 30 2016 20:47:06 GMT+0000 (UTC): Node server stopped.

/app/app/routes.js:786
         trans.mID = req.body.mID
               ^
TypeError: Cannot set property 'mID' of null

   app.put('/trans/:id',
  isLoggedIn,
  function (req, res){
  return models.TransModel.findById(req.params.id, function (err, trans) {
     trans.mID = req.body.mID;
     trans.mDate = req.body.mDate;
     trans.mType = req.body.mType;
     trans.mDescr = req.body.mDescr;
     trans.mAmt = req.body.mAmt;
     return trans.save(function (err) {
        if (!err) {
           console.log("updated");
        } else {
           console.log(err);
        }
        return res.send(JSON.stringify(trans));
     });
  });

}）;

提前致谢。

Answer 1

您应该在请求任何操作时禁用所有其他按钮，在请求响应之后，您应该再次启用所有按钮。此外，您可以在发出请求时显示忙碌图标，直到得到任何回复。

您只需使用ng-disable和标记即可设置request或request完成。

例如：

HTML：

<button class="btn btn-primary" ng-disabled="request" ng-click="save()" >Save</button>
<button class="btn btn-danger" ng-disabled="request" ng-click="delete()" >Delete</button>
<button class="btn btn-default" ng-disabled="request" ng-click="cancel()" >Cancel</button>

在控制器中：

$scope.request = false; // initially set request false

   $scope.save = function() {
     $scope.request = true; // set true when clicked on save button

     $timeout(function() {
       $scope.request = false;  // after request complete set false again
     },1000); // wait 1 second after made request. 

   };

请参阅PLUNKER DEMO

在页面上选择2个按钮

1 个答案: