javascript - 请求成功返回时更改按钮文本的问题

Question

我正在创建一个带有提交按钮的联系表单，该按钮具有三种状态:

1. 发送
2. 正在发送
3. 已发送

以下是该按钮的 HTML:

<button type="submit" class="btn btn-default" ng-class="{'btn-success': 
 stateText === 'Sent'}" ng-click="submit()">{{stateText}}</button>

这是 Controller 代码:

angular.module('contact')
.controller('contactController', function($scope) {

 $scope.data = {
  fullName: undefined,
  email: undefined,
  phone: undefined,
  message: undefined,
 };

 $scope.noEmailProvided = undefined;
 $scope.emailSent = undefined;
 $scope.stateText = 'Send';

 $scope.submit = function() {
   if (!$scope.data.email) {
     $scope.noEmailProvided = true;
     return;
   }

  $scope.stateText = 'Sending';

  emailjs.send("server","contactus", {
   fullName: $scope.data.fullName,
   email: $scope.data.email,
   phone: $scope.data.phone,
   message: $scope.data.message
  })
 .then(function(response) {
  $scope.emailSent = true;
  $scope.stateText = 'Sent';
   console.log("SUCCESS. status=%d, text=%s", response.status, response.text);
 }, function(err) {
   console.log("FAILED. error=", err);
 });
 }
});

初始“发送”状态有效，第二个“发送”状态有效，但我希望在请求成功返回时更改的“已发送”状态无效。我设置了一个断点并观察 $scope.stateText 分配成功发生，但文本未在 View 上呈现。

Answer 1

<button type="submit" class="btn btn-default" ng-class="{'btn-success': 
 stateText === 'Sent'}" ng-click="submit()">{{stateText}}</button>

正如 @alfishan-aqeel 在上面的评论中所说，这里的 type="submit" 将导致页面重新加载。由于您使用的是 ng-click，因此您的代码似乎不需要实际提交，因此删除 type 属性应该可以解决此问题。