使用Angularjs加载文本的Bootstrap按钮

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>