AngularJS上增加一个按钮微调

Question

我有一个形式，当用户点击“检查”微调框显示，让用户知道有事情发生。

我刚好设置$scope.button = "Check";然后在我的控制器$q.when(post_data.then(更改文本，包括动画这样做<i class="fa fa-refresh fa-spin">

这样做有很多问题，最重要的是，它不是普遍的，我最终会做它为每个按钮。

问题：这是否可以作为一个指令完成，我只需修改所有按钮，然后在我的控制器中，我可以调用一个启动和停止过程，在哪里我想要？一个例子会很有帮助。

即

<button type="button" SPINNER ng-click="submitCheck()">Check</button> 


    $scope.submitCheck = function() { 
       START BUTTON SPINNER 
       var post_data = post_resource($scope, CbgenRestangular); 

       $q.when(post_data.then(
        function (object) { 
         STOP BUTTON SPINNER 
         $scope.claims = object; 
        }, 
        function (object) { 
         STOP BUTTON SPINNER 
         console.log(object) 
        } 

       )) 


      } 

Answer 1

在过去，我写了一个基于对spiner.js和$timeout模拟一些简单的演示：

Plunker

这可能有帮助

Answer 2

我想今天正好解决同样的问题。我的目标是用旋转轮替换按钮文本，并确保按钮尺寸不会改变（以避免屏幕上令人讨厌的重新排列）。

结果是一个简单的指令：https://gist.github.com/weberste/be32c7301576259e9f96

可以使用如下：

<button click-spinner="saveClient(client, clientForm)"> 
    Submit 
</button> 

这将替换一个微调按钮上的文字，直到saveClient返回的承诺得到解决。

Answer 3

一个非常好的解决方案可以在文章“angularJS Button directive with busy indicator”中找到。

该解决方案将只需要两样东西（它实际上需要三个，如果算上spin.js的包容性，但您可以使用您选择的任何微调的实现）：

1. 一个指令放在应该在其自身内部显示微调器的元素。
2. 传递给该指令的功能需要返回一个承诺，这是该指令是如何知道何时停止微调。

使用此方法，不需要依赖需要由控制器设置/管理的特殊变量。

Answer 4

我放弃了我的项目中所有智能微调解决方案。有一个关于承诺拦截请求和响应，但它不包括你可能之前并请求和响应后做任何客户端的工作。我也看到了按钮上的指令，但是你需要在控制方法中返回真实的影响你的项目代码。我建议这样做很难，而且非常灵活。 在HTML：

<button ng-click="save()" ng-disabled="isProcessing">Save</button> 

控制器

$scope.save = function(){ 
    ..do some stuff... 
    $scope.isProcessing = true; 
    $http.post('someapi', data).success(
     ...maybe do more 
     $scope.isProcessing = false; 
    ); 
} 

Answer 5

It can be achievable using fontawesome css.

Answer 6

有一个解决方案，它工作得很好，你可以考虑这个项目： https://github.com/remotty/angular-ladda

这是建立在顶部ladda

内部控制

$scope.login = function() { 
    // start loading 
    $scope.loginLoading = true; 
    loginService.login(function() { 
     // stop loading 
     $scope.loginLoading = false; 
    }); 
    } 

内视图：

<button ladda="loginLoading" ng-click="login()"> 
    Login 
</button> 

Answer 7

退房这个指令，它不正是你想要的：

https://github.com/jvdvleuten/angular-button-spinner

而且演示：

https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html