2016-06-14 9 views
0

jVectorMapをレンダリングする角度指示があります。要素が表示されるまでのAngularJS遅延コンパイル命令

ページが最初にロードマップが隠されているが、ユーザがfancyBox

で地図を表示するためのリンクをクリックすることができたときには、ChromeとIEで完璧に取り組んでいるが、レンダリング時にFirefoxが私に叫びます隠し要素のSVG(私はNS_ERROR_FAILUREを取得)(this questionを参照)

だからquestionに基づいて、私は私が問題を解決するとは思われ、それは目に見えるになるまでコンパイル/レンダリングしないために私のMAPディレクティブを取得しようとしていますFirefox。

これを行う方法はありますか、これについては間違った方法で行っていますか?

THANKS !! ng-ifを使用して

更新

仕事、しかしjVectorMapでユーザがマップ上の領域と、マーカーを選択することができません。 fancyBoxが閉じられた後でもこれらの選択が維持されるようにしたいと思います。 ng-ifは地図をすべて削除します。

ディレクティブ私はHTMLにディレクティブを使用する方法

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); 

      } 
     } 
    } 

:fancybox-2モーダル内

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

mapModalのdivが表示されます。

答えて

3

ng-showの代わりにng-ifを試してみてください。これにより、条件が満たされたときにページ上にHTML要素が作成され、条件が満たされていないときに削除されます。

+0

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@?ファンシーボックスを閉じるときに、ファンシーボックスマップを再び開いたときにマップ選択を維持したいと思います。 'ng-if'は、fancyboxが閉じられるとマップを完全に削除します。より明確に私の質問を変更します。 – tkwargs

+0

はい、それは 'ng-if'を使うことの欠点です。明らかな(しかし、おそらく過度に難しい)アプローチは、ユーザーの選択を保存し、jvectmapを再作成するときにそれらを再適用することです。 これに代わる方法として、高さを0に設定するか、z-indexを使用してページの後ろに置くカスタムディレクティブ(これは非常にハッキリです)によって地図を隠すことができます。 – Mator

+0

私はあなたのアプローチを取って、すべて正常に動作しています。ありがとう! – tkwargs

関連する問題