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指令 ”中找到。

该解决方案仅需要两件事（如果算上包含spin.js，则实际上需要三件事，但您可以使用选择的任何Spinner实现）：

1. 指令放置在应该在其内部显示微调器的元素上。
2. 传递给指令的函数需要返回一个promise，这就是指令知道何时停止微调器的方式。

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

Answer 4

我放弃了项目中的所有智能微调器解决方案。 拦截请求和响应有一种希望，但是它不包括您在请求和响应之前和之后可能要做的任何客户端工作。 我还看到了按钮上的指令，但是随后您需要在控制方法中返回真正影响项目代码的promise。 我建议以困难的方式做到这一点，并且它非常灵活。 在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

使用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