Question

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

我也认为他已导入/注入了一些不需要的物品（如$ q）。

HTML视图中的

<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去。

多个AngularJS $ http请求通过指令阻止其他JavaScript方法

1 个答案: