javascript - Angular : wait for location. href 使用 $q.defer 完成

Question

我正在尝试在用户下载文件时显示 UI 加载栏。下载文件代码已经可以工作，并且我已经有一个使用 Angular 配置的 UI 进度指示器，因此只需将 bool 值设置为 true 或 false 即可显示/删除进度条。我的代码如下所示:

$scope.getCompletedJobs = function () {

    $rootScope.blockUI = true;

    var params = {
        StartDate: $scope.StartDate,
        EndDate: $scope.EndDate
    };

    location.href = apiEntry.linkHref('get-completed-transfer-jobs') + "?" + $httpParamSerializer(params);

    $rootScope.blockUI = false;
};

我的问题很明显，location.href执行后立即返回，导致$rootScope.blockUI = false;执行，即有效 $rootScope.blockUI = false;仅当 location.href 完成时。我相信我需要使用某种延迟/ promise 模式，但我不完全确定如何使用 Angular 来实现它。

更新答案

完成的工作代码现在看起来像这样

$scope.getCompletedJobs = function () {

    $rootScope.blockUI = true;

    var params = {
        StartDate: $scope.StartDate,
        EndDate: $scope.EndDate
    };

    $http.get(apiEntry.linkHref('get-completed-transfer-jobs') + "?" + $httpParamSerializer(params))
        .then(function (response) {
            //do something here with the response
            $rootScope.blockUI = false;

            var a = document.createElement('a');
            a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(response.data);
            a.target = '_blank';
            a.download = 'CompletedTransferJobs.csv';
            document.body.appendChild(a);
            a.click();
        });
};

Answer 1

您可能不想将页面重定向到 api 端点，而是在那里发出请求，

$scope.getCompletedJobs = function () {

        $rootScope.blockUI = true;

        var params = {
            StartDate: $scope.StartDate,
            EndDate: $scope.EndDate
        };

$http.get(apiEntry.linkHref('get-completed-transfer-jobs') + "?" + $httpParamSerializer(params)).then(function(response) {
//do something here with the response
 $rootScope.blockUI = true;
})



    };