使用Angularjs加载文本的Bootstrap按钮

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

Save 

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

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

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

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

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

Answer 1

在您的angularjs应用程序中，在您的视图中：

 
 {{ searchButtonText }}   

在控制器中：

 $scope.searchButtonText = "Search"; $scope.search = function() { $scope.searchButtonText = "Searching"; // Do your searching here } 

这是小提琴希望这是你想要实现的。

Answer 2

使用data-loading-text的优点是使HTML不受控制器的影响。 不要在控制器function中交换文本，而是在按钮内使用ng-show和ng-hide ：

  Save Please wait...  

在控制器中，将$scope.saving设置$scope.saving true或false。

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

如果要在加载时禁用该按钮，请使用ng-disabled 。 要使用旋转的FontAwesome图标，请将替换为标记，如下所示：

   Save