我有一个 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 模式内。
最佳答案
尝试使用ng-if而不是 ng-show。当条件满足时,这将在页面上创建 HTML 元素,当条件不满足时将其删除。
关于javascript - AngularJS 延迟编译指令直到元素可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37817692/