按钮单击时的角度加载反馈

Question

在使用 Angular 在实时服务器上测试项目时，我注意到在用户提交表单和实际发生的任何事情之间存在一个小的延迟（当涉及后端进程和数据库时）。所以我想创建视觉反馈，点击按钮变成加载 gif 或其他东西。

我不知道如何通过我的 Angular 提交函数访问按钮元素。

假设我有这个 HTML：

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit">Submit</button>
</form>

然后在 Angular 中：

$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
});

我只是不知道如何访问单击的按钮。理想情况下，我不想使用特定的 id 或类，因为我想将其应用于所有单击的按钮。

我已经知道如何创建我想要的视觉样式，只是将它应用到相关的元素上是个问题。

Answer 1

只需使用范围变量更改 ng-style 或 ng-class（首选）：

使用 ng-style 的简单样式：

HTML

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit" ng-style="{'opacity': buttonOpacity} ">Submit</button>
</form>

JS：

$scope.buttonOpacity = 0.4;
$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
  $scope.buttonOpacity = 0.4;
});

使用 ng-class 的更好选择：

HTML

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit" ng-class="{'myAlteredButtonClass': applyNewButtonClass === true} ">Submit</button>
</form>

JS：

$scope.applyNewButtonClass = false;
$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
  $scope.applyNewButtonClass = true;
});

CSS：

.myAlteredButtonClass {
    opacity: 1;
    border: 1px solid;
    color: green;
    ... etc.
}

Answer 2

在 Angular 中有很多方法可以做到这一点。其中有ng-show和ng-if。使用 ng-show，您可以执行以下操作：

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button ng-show="!submitted" type="submit">Submit</button>
  <div ng-show="submitted" >Loading spinner here</div>
</form>

和

$scope.submit = function(user){
  $scope.submitted = true;
});

Answer 3

如果您为表单命名，您将能够访问其元素：

https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action