AngularJS delay compiling directive until element is visible

Question

I have an angular directive that renders a jVectorMap.

When the page first loads, the map is hidden, but the user can click on a link to show the map in a fancyBox

It's working perfectly fine in Chrome and IE, but Firefox yells at me when rendering SVG on a hidden element (i get NS_ERROR_FAILURE) (see this question)

So based on that question, I'm trying to get my map directive to not render/compile until it's visible, which I think will fix the issue in Firefox.

Is there a way to do this, or am I going about this in the wrong way?

THANKS!!

Update

Using ng-if does work, however in jVectorMap the user can select regions and markers on the map. I'd like for those selections to persist even after the fancyBox is closed. ng-if removes the map all together.

directive

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

            }
        }
    }

How I use the directive in html:

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

The mapModal div shows inside a fancybox-2 modal.

Answer 1

Try using ng-if instead of ng-show. This will create the HTML elements on the page when the condition is satisfied, and remove them when it's not.