javascript - 通过指令的多个 AngularJS $http 请求正在阻止其他 JavaScript 方法

Question

我从同事那里继承了一个项目，我需要解决一些问题。该项目使用 Angular UI-Bootstrap 模块及其指令/服务。我的同事编写了一个自定义指令，它使用 $http 获取一些数据，然后根据返回的结果填充模板并将其注入(inject) View 中。这看起来很好，但我注意到当这个指令运行时(有时在一个 View 上有 20 个实例)它会阻止其他功能，例如 UI Bootstrap 提供的模态窗口。当页面加载并且自定义指令正在加载/等待 $http 结果时，启动模式窗口(或其他任何东西)的点击功能似乎必须等到大多数自定义指令完成为止已执行。自定义指令看起来像这样(见下文)，并且我已将优先级设置为 1 但这没有任何作用...我是否需要克隆/删除属性，任何人都可以看到一种可以改进我所提供的代码的方法吗？是否应该使用 compile 而不是 link 函数？我可以阻止该指令的阻塞性质吗？

我还认为他导入/注入(inject)了一些不需要的项目(例如 $q)。

在 HTML View 中

<div data-get-partner-availability data-partner-id="1234"></div>

和 JavaScript/指令:

.directive('getPartnerAvailability', function ($http, $q) {
        return {
            restrict: 'AE',
            priority: 1,
            scope: {
                partnerId: '@partnerId'
            },
            template: '<div class="partner-availability"><img src="../../../img/ajax-loader.gif" /></div>',
            controller: function () {
                return {
                    getAvailability: function (partnerId) {
                        return $http({
                            method: 'GET',
                            url: '/api/partner/:partnerId/getAvailability',
                            params: {
                                'partnerId': partnerId
                            }
                        });
                    }
                };
            },
            link: function (scope, element, attrs, controller) {

                controller.getAvailability(scope.partnerId).then(function (result) {

                    var html = '',
                        container = [];

                    if (typeof result.data !== 'undefined' && typeof result.data.times !== 'undefined' && result.data.times.length > 0) {
                        var isFirst = true;
                        for (var i in result.data.times) {
                            var itemHtml = '';

                            // some nested conditions that create a string called itemHTML

                            html += itemHtml;
                        }
                    } else {
                        html += 'Some message';
                    }

                    element.html(html);
                });
            }
        }
    }

提前致谢。

Answer 1

大多数浏览器对每个页面允许的并发请求数量都有限制。您正在创建大量请求，因此后面的请求将在队列中等待，直到前面的请求完成。这将导致模式在较早的请求完成之前不会出现，因为模式 $http 请求将位于队列的底部。

为了解决这个问题，我首先将所有数据检索逻辑移至一个服务，并让指令调用该服务。然后，在该服务中，您可以维护请求队列并确保它们不会同时发送，或者您可能希望向服务器 API 添加批处理功能，以便您可以获得超过 1 个合作伙伴的可用性1 次。