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