通過指令的多個AngularJS $ http請求阻止了其他JavaScript方法

我從同事繼承了一個項目，我需要解決一些問題。該項目使用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); 
       }); 
      } 
     } 
    }

在此先感謝。

來源

2014-06-11 Mike Sav

你確定這個指令導致了這個問題嗎？ $ http請求是異步的。其他元素是否依賴於此指令？也許打開開發人員工具並檢查網絡選項卡以確認該頁面在渲染前確實正在等待http請求 – maurycy

我使用了Firebug和Chrome開發工具，網絡選項卡顯示了大約20個請求......一旦大多數請求完成點擊模式窗口等功能...再次激活（例如，如果我點擊打開的模式按鈕，模型不會打開，直到大多數$ http請求完成） –

模式窗口本身創建GET請求他們自己......這個請求似乎被置於上述指令的所有請求的底部。 –

大多數瀏覽器對每頁允許的併發請求數有限制。您正在創建大量請求，因此稍後的請求將在隊列中等待，直到先前的請求完成。這將導致模式不會出現，直到前面的請求完成，因爲模態$ http請求將在隊列的底部。

爲了清理這個問題，我首先將所有的數據檢索邏輯移動到一個服務中，並讓指令調用該服務。然後，在該服務中，您可以維護一個請求隊列並確保它們並非全部同時發送，或者您可能希望向服務器api添加批處理功能，以便可以在服務器API中添加多個合作伙伴可用性1去。

來源

2014-06-11 12:24:09 Zerot

謝謝。這幫助我瞭解我面臨的問題的原因。我的優先級請求已排隊，因爲較早的耗時請求 –

我們可以爲我們的請求中的任何一個設置優先級嗎？ –

通過指令的多個AngularJS $ http請求阻止了其他JavaScript方法

回答

相關問題