在使用 bootstrap 和 jquery 的非 Angular 应用程序中,我可以创建如下按钮:
<button id="saveButton" data-loading-text="Please wait...">Save</button>
然后,当单击按钮时,我可以将其设置为加载状态,如下所示:
$('#saveButton').button('loading');
单击此按钮还会触发 ajax 请求,并且在该请求的回调中,我可以像这样重置按钮:
$('#saveButton').button('reset');
如何在 Angular 应用程序中实现相同的行为?该应用程序还包括 Jquery 和 Bootstrap。
最佳答案
使用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>
关于jquery - 使用 Angularjs 加载文本的 Bootstrap 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26170192/