AngularJS延迟编译指令直到元素可见

Question

我有一个呈现jVectorMap的角指令。

当页面第一次加载时，地图是隐藏的，但是用户可以单击链接在fancyBox中显示地图。

它在Chrome和IE中运行得很好，但是火狐在一个隐藏元素上呈现SVG时对我大喊大叫(我得到了NS_ERROR_FAILURE) (参见这个问题)

因此，基于这个问题，我试图获得地图指令，直到它是可见的，它才会呈现/编译，我认为这将解决火狐中的问题。

有办法这样做吗，还是我走错路了？

谢谢！！

更新

使用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模式中。

Answer 1

尝试使用吴-如果而不是ng显示。这将在满足条件时在页面上创建HTML元素，并在不满足条件时删除它们。