1

我的页面上设置了一个加载图标，如下所示：

<div class="loading-mask" 
    data-ng-show="action != null">
    <span>{{action}} ...</span>
</div>

当我将 $scope.action 设置为时，加载框中会出现一条消息。

加载我的页面时，我有许多不同的异步进程来获取数据。例如我有：

   getUserProfiles: function ($scope) {
        var url = '/api/UserProfile/GetSelect';
        $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.userProfiles = data;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
            });
    },

和：

    getSubjects: function ($scope) {
        var url = '/api/Subject/GetSelect';
        $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.subjects = data;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
            });
    },

我怎样才能做到这一点，以便这些异步进程中的第一个会导致出现“正在加载”消息，而异步进程的最后一个会导致加载框不再显示。请注意，此时我并不关心错误消息。我只是希望加载在一切完成时不显示。

4

2 回答 2

2

为了扩展 devmiles 所说的内容，但要处理多个异步函数，您需要在要调用的第一个函数上设置一个加载标志。IE：

   getUserProfiles: function ($scope) {
    $scope.loading = true;
    var url = '/api/UserProfile/GetSelect';
    $http({ method: 'GET', url: url })
        .success(function (data, status, headers, config) {
            $scope.option.userProfiles = data;
        })
        .error(function (data, status, headers, config) {
            alert("Error: No data returned from " + url);
        });
},

然后你会想要将每个异步函数包装在一个 Promise 中，如下所示：

   getUserProfiles: function ($scope) {
    var deferred = $q.defer();
    $scope.loading = true;
    var url = '/api/UserProfile/GetSelect';
    $http({ method: 'GET', url: url })
        .success(function (data, status, headers, config) {
            $scope.option.userProfiles = data;
            deferred.resolve();
        })
        .error(function (data, status, headers, config) {
            alert("Error: No data returned from " + url);
            deferred.reject();
        });
   return deferred;
},

然后，您可以在所有异步函数上调用 $q.all ，并且一旦所有异步函数都已解决，就会发生此成功回调：

$q.all([getUserProfiles, getSubjects]).then(function() {
    $scope.loading = false;
}

这意味着一旦您的所有功能都已解决，加载将设置为 false。

注意：如果您想访问回调的数据，可以将其作为“deferred.resolve(x)”的参数传入，然后在您的 $q.all 回调中，它将作为 function(x) 使用{ 用 x 做某事}。

希望这可以帮助！

编辑：不要忘记将 Angular 的承诺服务 $q 传递给您的函数所在的控制器。

于 2013-10-15T13:53:51.360 回答
0

只需在实例化控制器时设置一些布尔标志，然后在成功/错误函数中重置此标志。

.controller('MyCtrl', function ( $scope ) {
  $scope.isLoading = true;
  $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.subjects = data;
                $scope.isLoading = false;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
                $scope.isLoading = false;
            });
});

与此标志一起使用ng-show以显示您正在加载的东西。

于 2013-10-15T12:56:19.200 回答