使用 Angularjs 加载文本的 Bootstrap 按钮

在使用 bootstrap 和 jquery 的非角度应用程序中，我可以创建如下按钮：

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

然后，当单击按钮时，我可以将其设置为加载状态，如下所示：

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

单击此按钮还会触发 ajax 请求，在该请求的回调中，我可以像这样重置按钮：

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

如何在角度应用程序中实现相同的行为？该应用程序还包括 Jquery 和 Bootstrap。

使用的优点data-loading-text就是让 HTML 远离控制器。不要在控制器函数中交换文本，而是使用ng-show and ng-hide按钮内：

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

在控制器中，设置$scope.saving为真或为假。

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

如果您想在加载时禁用该按钮，请使用ng-disabled。要使用旋转的 FontAwesome 图标，请将<span>与<i>标签如下所示：

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