Bootstrap button loading text with Angularjs

Question

In a non-angular application that uses bootstrap and jquery, I can create buttons like this:

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

Then, when the button is clicked, I can set it to it's loading state like this:

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

Clicking this button also fires an ajax request, and in the callback for that request, I can reset the button like this:

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

How can I accomplish this same behavior within an angular application? The application also includes Jquery and Bootstrap.

Answer 1

The advantage of using data-loading-text is to keep the HTML out of the controller. Instead of swapping the text in a controller function, use ng-show and ng-hide inside the button:

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

In the controller, set $scope.saving to true or false.

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

If you want to disable the button while it is loading, use ng-disabled. To use a spinning FontAwesome icon, replace the <span> with the <i> tag as shown here:

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