AngularJS添加按钮微调器

Question

I have a form, when the user clicks 'check' a spinner shows to let the user know something is happening.

I did this by just setting $scope.button = "Check"; then in my controller $q.when(post_data.then( changing the text to include the animation <i class="fa fa-refresh fa-spin">

This has many issues most important is that it's not universal and I end up doing it for every button.

Question: Could this be done as a directive that I just amend to all my buttons, then in my controllers I could just call a start and stop process where I want to? An example would be helpful.

ie

<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

In the past I wrote some simple demo based on spiner.js and $timeout simulation:

Plunker

It might helpful

Answer 2

I tried to solve exactly the same problem today. My goal was to replace the button text with a spinning wheel and ensure the button size does not change (to avoid nasty rearrangements on the screen).

The result is a simple directive: https://gist.github.com/weberste/be32c7301576259e9f96

It can be used as follows:

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

This will replace the button text with a spinner until the promise returned by saveClient is resolved.

Answer 3

A really nice solution can be found in the article " angularJS Button directive with busy indicator ".

This solution will only require two things (it actually requires three, if you count the inclusion of spin.js, but you can use any spinner implementation that you choose):

1. A directive is placed on the element that should display the spinner inside of itself.
2. The function that is passed to the directive needs to return a promise, which is how the directive knows when to stop the spinner.

With this method, there's no need to rely on special variables that need to be set/managed by the controller.

Answer 4

I gave up on all smart spinner solutions in my project. There is one promising about intercepting the request and responses but it does not include any client side work you might be doing before and after the request and response. I have also seen directives on the button but then you need to return promises in your control methods which truly affects you project code. I recommend to do it the hard way, and its very flexible. in html:

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

in the controller

$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

There is one solution that works well you could consider this project: https://github.com/remotty/angular-ladda

it's build on top of ladda

Inside controller

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

Inside View:

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

Answer 7

Check out this directive, it does exactly what you want:

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

And a demo:

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