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

角度控制器中的DOM操作似乎是错误的。但这并非没有几个令人头痛的问题：）

我有一个按钮，点击，它会在后台执行一个异步请求。在异步请求期间，我希望所有按钮（可能还有页面上的一些其他元素）都被禁用，并且单击的按钮可以播放加载图标

---

最干净的方法是什么？

我通常使用$scope上的一个名为loading的变量来实现这一点。无论何时发生异步操作，只要将其设置为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>

点击我！
加载。。。。

这正是您想要的

---

我也有同样的想法，但我有点担心如何让它看起来真的很漂亮。我想这绝对是它的基础，不过我想添加一个动画，也许是为了让其他按钮淡入淡出。如果我想应用jQuery效果，我该怎么做？你有什么想法吗？@jordymow在接受迈克的回答后，你可以把它作为下一个SO问题发布；）好的，我稍后会发布这个问题：）我现在正试图自己创建一个指令，但我想知道大家会怎么做。谢谢可能重复的

    var app = angular.module('myapp', ["ui.utils", "ui.router"]);

    app.factory('iTunesData', function($http) {
       return {
            doSearch: function(sQuery) {
                 //return the promise directly.
                 return $http.jsonp('http://itunes.apple.com/search', {
                        params: {
                            "callback": "JSON_CALLBACK",
                            "term": sQuery
                        }
                    });
            }
       }
    });

    app.controller('iTunesSearch', function($scope, $location, $routeParams, iTunesData) {
        $scope.search = function() {
          iTunesData2.doSearch($scope.searchTerm)
            .then(function(result) {
                  $scope.data = result.data;
                  $location.path($scope.searchTerm);
              });
        }
        $scope.searchTerm = $location.$$path.split("/")[1];
        if($scope.searchTerm!="") {
          $scope.search();
        }
    });