使用AngularJS的异步请求和加载按钮

Question

Angular控制器中的DOM操作似乎是错误的.但这不是没有一些头痛:)

我有一个按钮,在ng-click时,它将在后台执行异步请求.在异步请求期间,我希望禁用所有按钮(可能还有一些页面上的元素),单击按钮可以播放加载图标.

这样做最干净的方法是什么？

Answer 1

我通常使用$ scope上的变量来调用load.每当发生异步操作时,只需将其设置为true即可.那么任何需要被禁用或以其他方式受到影响的东西都可以将它的状态基于此.

这是一个虚拟控件:

function TestCtrl($scope, $http) {
    $scope.loading = false;

    $scope.doASynch = function () {
        $scope.loading = true;
        $http.get("/url").success(function () {
            $scope.loading = false;
        });
    }
}

这是一个示例模板.

<div ng-controller="TestCtrl">
    <a class="button" ng-disabled="loading" ng-click="doASynch()">
        <span ng-hide="loading">Click me!</span>
        <span ng-show="loading">Loading....</span>
    </a>
</div>