jquery - 使用 Angularjs 加载文本的 Bootstrap 按钮

Question

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

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

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

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

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

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

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

Answer 1

使用data-loading-text的优势就是让 HTML 远离 Controller 。不要在 Controller 函数中交换文本，而是使用 ng-show和ng-hide按钮内:

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

在 Controller 中，设置$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>