Question

我有一个表单，当用户点击'check'时，微调器会显示让用户知道正在发生的事情。

enter image description here

我这样做只需设置$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返回的promise被解析。

Answer 3

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

这个解决方案只需要两件事（实际上需要三件事，如果算上包含spin.js，但你可以使用你选择的任何微调器实现）：

指令放在应该在其自身内部显示微调器的元素上。
传递给指令的函数需要返回一个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

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

AngularJS添加一个Button Spinner

7 个答案: