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

我有一个角度指令，呈现jVectorMap。AngularJS延迟编译指令，直到元素可见

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

它的工作在Chrome和IE完全正常的地图，但Firefox在我的渲染时破口大骂一个隐藏的元素在SVG（我得到NS_ERROR_FAILURE）（见this question）

因此，基于该question，我试图让我的地图指示不渲染/编译直到它的可见，我认为这将解决问题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模式中。

来源

2016-06-14 tkwargs

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

来源

2016-06-14 16:47:33 Mator

Thanks @Mator this _does_ work，但是在'jvectormap'中，用户可以选择地图上的标记和区域。关闭fancybox时，我想再次打开fancybox地图时地图选择会持续。 fancybox关闭后，'ng-if'将完全移除地图。将修改我的问题更清楚 – tkwargs

是的，这是使用'ng-if'的缺点。显而易见（但很可能非常困难）的方法是存储用户的选择，然后在jvectormap重新创建时重新应用它们。作为替代方案，您可以通过一些自定义指令来隐藏地图，该指令会将其高度设置为0或使用z-index将其放置在页面后面（这将非常hacky）。 – Mator

我采取了你的方法，一切工作正常。谢谢！ – tkwargs

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

回答

相关问题