javascript - 单击按钮时的 Angular 加载反馈

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.
}