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

Question

我有一个 angular 指令呈现 jVectorMap.

首次加载页面时，地图是隐藏的，但用户可以单击 link 以 fancyBox

显示地图

它在 Chrome 和 IE 中工作得很好，但是当在隐藏元素上渲染 SVG 时 Firefox 对我大喊大叫（我得到 NS_ERROR_FAILURE）（参见 this question）

所以基于那个 question，我试图让我的地图指令在它可见之前不 render/compile，我认为这将解决 Firefox 中的问题。

有没有办法做到这一点，还是我用错了方法？

谢谢！！

更新

使用 ng-if 确实有效，但是在 jVectorMap 中，用户可以 select 地图上的区域和标记。我希望那些 selection 即使在 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 元素，不满足时将其删除。

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

AngularJS delay compiling directive until element is visible

javascript

angularjs

jvectormap

fancybox-2