Question

Angular控制器中的DOM操作似乎是错误的。但这并非没有一些令人头疼的问题：）

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

最干净的方法是什么？

Answer 1

我通常使用名为loading的$ scope上的变量来执行此操作。每当发生异步操作时，只需将其设置为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

以下是您正在寻找的内容

Loading animations with Asynchronous HTTP Requests in Angular JS

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

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

2 个答案: