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

Question

我有一个 Angular Directive(指令)，可以渲染 jVectorMap .

当页面首次加载时， map 是隐藏的，但用户可以单击链接以 fancyBox 中显示 map 。

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

基于此 question ，我试图让我的 map 指令在可见之前不渲染/编译，我认为这将解决 Firefox 中的问题。

有没有办法做到这一点，或者我是否以错误的方式处理这个问题？

谢谢!!

更新

使用ng-if确实有效，但是在jVectorMap中用户可以在 map 上选择区域和标记。我希望这些选择即使在 fancyBox 关闭后也能保留。 ng-if 将 map 全部删除。

指令

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 元素，当条件不满足时将其删除。