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

Question

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

首次加载页面时，地图会被隐藏，但用户可以点击链接以fancyBox

显示地图

它在Chrome和IE中运行得非常好，但Firefox在隐藏元素上渲染SVG时会对我大吼大叫（我得到NS_ERROR_FAILURE）（参见this question）

所以基于question，我试图让我的map指令在它可见之前不进行渲染/编译，我认为这将解决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模式中。

Answer 1

尝试使用ng-if代替ng-show。这将在条件满足时在页面上创建HTML元素，并在不满足时删除它们。