Question

我有一个modal dialog，用户可以在其中选择要上传的文件。实际的文件选择/上传由ng-file-upload处理。当用户选择一个或多个文件时，它们将添加到对话框中的列表中，显示每个元素的进度，完成和失败状态。项目列表在自定义指令中处理，因为它也用于其他地方。

我需要阻止用户在文件上传时解除对话框，这对我来说是个挑战，因为关闭对话框的按钮在一个控制器中，而上传列表在另一个控制器中（指令控制器）。我已经解决了这个问题，通过给这个指令提供清空列表：

//extract from directive:
var directive = {
      ...
      scope: {
        'files': '='
      }
   }

//extract from usage
<uploadFiles files="files" />

现在外部控制器和内部控制器共享上传的文件列表。

因此，当用户通过单击Close按钮尝试关闭对话框时，我首先检查列表是否包含仍在上传的文件，如果是，我会禁用该按钮并显示一个微调器和一个＆＃39 ;请等待＆＃39; -text。

//from the outer controller
function onModalOk() {
    if (uploadInProgress()) {
        waitForCompletionBeforeClosingDialog();
    } else {
        closeDialog();
    }
}

通过在文件数组上设置深度监视来实现waitForCompletionBeforeClosingDialog()。每次触发手表时，我都会循环查看每个文件是否都已完成。如果是这样，我会删除手表并关闭对话框。

    function waitForCompletionBeforeClosingDialog() {
        $scope.showWaitText = true;
        var unregisterWatchForCompletion = $scope.$watch('files',  function(files) {
            if (allCompleted(files)) {
                unregisterWatchForCompletion();
                closeDialog();
            } 
        }, true);
    }

一切正常，除了一件小事......

在控制台中，我收到此错误：

TypeError: Illegal invocation
    at equals (angular.js:931)
    at equals (angular.js:916)
    at Scope.$digest (angular.js:14302)
    at Scope.$apply (angular.js:14571)
    at angular.js:16308
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312

它被紧紧地解雇了。

我已经尝试调试此错误，但没有运气..
有人有什么想法吗？是否有更好的方法一起完成这一切？

Answer 1

如何使用$httpInterceptor来计算活跃请求的数量？

类似的东西：

angular.module('someModule').provider('httpStatus', ['$httpProvider', function ($httpProvider) {


    var currentRequestCount = 0;
    var interceptor = ['$q', function ($q) {
        return {
            request: function (config) {
                currentRequestCount++;

                return config;
            },
            response: function (response) {
                currentRequestCount--;

                return response;
            },
            responseError: function (rejection) {
                currentRequestCount--;

                return $q.reject(rejection);
            }
        }
    }];

   $httpProvider.interceptors.push(interceptor);
   this.$get = function () {
        return {
            isWaiting: function () {
                return currentRequestLength > 0;
            }
        }
    };
}]);

您可以将httpStatus服务注入对话框，并在有任何活动请求时使用它来禁用按钮。可能还需要添加requestError处理程序。

https://docs.angularjs.org/api/ng/service/ $ HTTP

角度表导致循环Iligal调用错误

1 个答案: