AngularJS：“提交”按钮需要单击两次才能起作用

Question

我的表单上有一个提交按钮，但是出于某些奇怪的原因，它要求我在调用保存功能underneth之前单击两次按钮，我在HTML中使用Pug

这是我的HTML模板：

<form ng-submit="save()">
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <ol ng-model="service.category" title="Select a category" class="nya-bs-select">
          <li nya-bs-option="category in categories.rows" class="nya-bs-option"><a> <span>{{category.name}} </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
        </ol>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <div class="input-group"><span class="input-group-addon">Service Name</span>
          <input type="text" ng-model="service.name" class="form-control"/>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <textarea ng-model="service.description" placeholder="Service Description" rows="10" class="form-control"></textarea>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <button type="submit" value="Save" class="btn btn-default"> Save</button>
      </div>
    </div>
  </div>
</form>

调用的保存功能为

angular.module('App.controllers')
.controller('UpdateServiceCtrl', [
  '$scope', '$state', 'ServicesService', 'Notification',
function ($scope, $state, ServicesService, Notification) {
  $scope.service = $scope.$parent.service;
  $scope.categories = $scope.$parent.categories;

   /**
   * Edits a service
   * @param  {integer} serviceID Id of the service to be edited
   * @return {undefined}           Does not return any values
   */

  $scope.save = function () {
    $scope.service.category_id = $scope.service.category.id;
    ServicesService.save($scope.service, $scope.service.id)
    .then(function (result) {
      $state.reload();
    })
  }
}]);

Answer 1

您可以使用ng-disabled='isButtonEnabled'首次单击后的提交按钮。 像这样修改您的保存

$scope.save = function () {
$scope.isButtonEnabled = false; 
    $scope.service.category_id = $scope.service.category.id;
    ServicesService.save($scope.service, $scope.service.id)
    .then(function (result) {
      $state.reload();
    })
  }

让我知道它是否无效。