AngularJS延遲編譯指令，直到元素可見

我有一個角度指令，呈現jVectorMap。AngularJS延遲編譯指令，直到元素可見

當第一次加載頁面，地圖是隱藏的，但用戶可以點擊一個鏈接顯示在fancyBox

它的工作在Chrome和IE完全正常的地圖，但Firefox在我的渲染時破口大罵一個隱藏的元素在SVG（我得到NS_ERROR_FAILURE）（見this question）

因此，基於該question，我試圖讓我的地圖指示不渲染/編譯直到它的可見，我認爲這將解決問題Firefox瀏覽器。

有沒有辦法做到這一點，或者我以錯誤的方式解決這個問題？

謝謝！

更新

使用ng-if確實工作，然而在jVectorMap用戶可以在地圖上選擇的區域和標記。我希望這些選擇在fancyBox關閉後仍然存在。 ng-if一起移除地圖。

指令

angular.module('myApp') 
    .directive("selectionMap", electionMap); 

    function selectionMap(){ 
     return { 
      restrict: "E", 
      link : function(scope,element){ 
       jVectorMapOptions = { 
        // set jvm options (http://jvectormap.com/documentation/javascript-api/jvm-map/) 
        option : 'something', 
        option2: 'something else' 
        // and so on 
       }; 
      element.vectorMap(jVectorMapOptions); 

      } 
     } 
    }

我如何使用該指令在HTML：

<div id="mapModal" ng-show="mapSelected"> 
    <selection-map id="myMap"></selection-map> 
</div>

的mapModal DIV顯示的fancybox-2模式中。

來源

2016-06-14 tkwargs

嘗試使用ng-if而不是ng-show。這將在滿足條件時在頁面上創建HTML元素，並在不滿時刪除它們。

來源

2016-06-14 16:47:33 Mator

Thanks @Mator this _does_ work，但是在'jvectormap'中，用戶可以選擇地圖上的標記和區域。關閉fancybox時，我想再次打開fancybox地圖時地圖選擇會持續。 fancybox關閉後，'ng-if'將完全移除地圖。將修改我的問題更清楚 – tkwargs

是的，這是使用'ng-if'的缺點。顯而易見（但很可能非常困難）的方法是存儲用戶的選擇，然後在jvectormap重新創建時重新應用它們。作爲替代方案，您可以通過一些自定義指令來隱藏地圖，該指令會將其高度設置爲0或使用z-index將其放置在頁面後面（這將非常hacky）。 – Mator

我採取了你的方法，一切工作正常。謝謝！ – tkwargs

AngularJS延遲編譯指令，直到元素可見

回答

相關問題