Angularjs按钮加载状态并在调用服务器休息时禁用

Question

在我的角度应用程序中，我有一些调用REST服务的按钮。

有时，休息服务需要很长时间才能回复。为防止用户在收到服务回答之前点击一次，我想停用按钮并将其值更改为加载... ＆＃39 ;

我想做同样的事情，仅适用于价值等于＆＃39; 搜索＆＃39;或＆＃39; 重新启动＆＃39;

例：

代码：

<input type="submit" class="btn" ng-click="relaunch()" ng-value="Relaunch"/>

$scope.relaunch= function(){
    RelaunchService.relaunch().then(function(data){
       // server response
      })
};

为此，我想创建一个指令。但我不知道怎么做： - （

PS：请注意，用户可以同时点击几个不同的按钮。

Answer 1

您可以使用ng-disabled

语法是

<INPUT
 ng-disabled="expression">
  ...
</INPUT>

所以在你的情况下，你可以做为

<input type="submit" class="btn" ng-disabled="btnDisabled"  ng-click="relaunch()" ng-value="Relaunch"/>
 $scope.btnDisabled=false;
 $scope.relaunch= function(){
     $scope.btnDisabled=true;
     RelaunchService.relaunch().then(function(data){
       // server response

     }).finally(function(){
         $scope.btnDisabled=false;
     })
 };