Question

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

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

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

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

单击此按钮也会触发ajax请求，在该请求的回调中，我可以重置按钮，如下所示：

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

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

Answer 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>

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