angularjs - AngularJS 的异步请求和加载按钮

Question

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

我有一个按钮，在 ng-click 上，它将在后台执行异步请求。在该异步请求期间，我希望禁用所有按钮（可能还有页面上的更多元素），并希望单击的按钮播放加载图标。

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

Answer 1

我通常使用 $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>

Answer 2

这正是您正在寻找的

在 Angular JS 中使用异步 HTTP 请求加载动画

    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();
        }
    });