使用 Angularjs 加载文本的引导按钮

Posted 2023-05-08

【中文标题】使用 Angularjs 加载文本的引导按钮

【英文标题】：Bootstrap button loading text with Angularjs

【发布时间】：2014-11-27 23:53:07

【问题描述】：

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

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

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

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

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

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

如何在 Angular 应用程序中完成同样的行为？该应用程序还包括 Jquery 和 Bootstrap。

【参考方案1】：

使用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 图标，请将 <span> 替换为 <i> 标签，如下所示：

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

【参考方案2】：

在您的 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 希望这是您想要实现的。

【讨论】：

这可行，但似乎在具有大量按钮以及在保存过程中和之后需要发生的其他行为的大型应用程序中它可能会很快变得混乱。必须不断地将应用程序置于加载和非状态似乎很复杂。我希望找到一种使用指令来解决这个问题的方法。我会将您的答案标记为已接受，并专门提出一个关于指令的新问题。

是的，如果页面上的按钮很少，您可以使用这种方式。如果您愿意，可以根据您的要求创建自定义指令。

不只是更改文本，还禁用按钮。

有和OP一样的问题。这是某种解决方案。但是，如果您还想在 searchButtonText 中使用 html，例如加载程序图标。那么这不起作用。