與Angularjs

在使用引導和jQuery非角應用引導按鈕加載文本，我可以這樣創建按鈕：與Angularjs

<button id="saveButton" data-loading-text="Please wait...">Save</button>

然後，單擊該按鈕時，我可以將其設置爲它的負載狀態是這樣的：

$('#saveButton').button('loading');

點擊此按鈕還觸發一個AJAX請求，並且在回調爲該請求，我可以重置這樣的按鈕：

$('#saveButton').button('reset');

如何在角度應用程序中完成相同的行爲？該應用程序還包括Jquery和Bootstrap。

來源

2014-10-02 flyingL123

在你angularjs應用，您的視圖中：

<div> 
    <button type="submit" class="btn btn-primary" ng-click="search()">{{ searchButtonText }} 
    </button> 
</div>

在控制器：

$scope.searchButtonText = "Search"; 

$scope.search = function() { 
    $scope.searchButtonText = "Searching"; 
    // Do your searching here 
}

這裏是fiddle 希望這是你想要實現的東西。

來源

2014-10-02 22:29:57 mpatel

這工作，但似乎是它可以在有很多按鈕的大型應用程序變得混亂迅速以及需要額外行爲在保存過程中和保存後發生。必須不斷地將應用程序置於加載和非狀態看起來很複雜。我希望找到一種方法來解決這個使用指令。我會將你的答案標記爲已接受，並專門提出一個關於指令的新問題。 – flyingL123 2014-10-03 00:55:14

是的，如果頁面上有幾個按鈕，則可以使用這種方式。如果您願意，您可以根據您的要求創建自定義指令。 – mpatel 2014-10-03 16:00:38

不僅僅是改變文字也是禁用按鈕。 – 2015-01-05 23:41:26

使用data-loading-text的優點是將HTML保留在控制器之外。相反，在交換控制器功能的文字，使用ng-show和ng-hide按鈕內：

<button> 
    <span ng-hide="saving">Save</span> 
    <span ng-show="saving">Please wait...</span> 
</button>

在控制器中，設置$scope.saving爲true或false。

$scope.saving = false; 
$scope.save = function() { 
    $scope.saving = true; 
    // Do your saving here 
    $scope.saving = false; 
}

如果要在加載時禁用按鈕，請使用ng-disabled。要使用一個旋轉的FontAwesome圖標，如圖所示與<i>標籤更換<span>：

<button ng-disabled="saving"> 
    <span ng-hide="loading">Save</span> 
    <i class="fa fa-spinner fa-spin" ng-show="saving"></i> 
</button>

來源

2015-03-25 04:43:58

回答

相關問題