如何$为Leaflet地图控件中的html编译AngularJS指令？

Question

我正在尝试使用AngularJS框架向传单地图图例添加模态按钮。查看本演示中的地图和模态按钮（模态按钮是圆形信息按钮）：http://skyplan.ch/maps/dev/gwm6/

使用看起来像<div infomodal="views/modals/popup.html">的Angular指令插入模态。

我需要在地图图例中放置这样一个按钮。问题是，由于图例是动态创建的，我需要$编译模态指令。但是，我只能通过控件iControl的onAdd函数访问地图控件的内容。

我试过在onAdd函数中生成的div上调用$ compile，但是没有用。有没有人试图做过这样的事情？

Answer 1

我使用以下步骤获得它：

1. 将主控制器的范围放在变量中。

   var scope = angular.element('[ng-controller]:first').scope();
   

2. 创建了一个自定义按钮来测试语言的更改

   var $div = $('<div><button ng-click="lang=\'de\';changeLanguage();">Change Language to DE</button></div>');
   

3. 将其附加到您的叶子图例控件

   $('.leaflet-bottom.leaflet-right:last .leaflet-control').append($div);
   

4. 强制angular编译附加的HTML控件，指定主控制器的范围上下文（第1步）

   angular.injector(['ng']).invoke(function($compile) {
       $compile($div)(scope);
   });
   

5. 点击按钮，发生“魔术”。 ： - ）

6. 您可能需要在每次MapBox更新后附加（第3步）并重新编译（第4步）。

由于我不在您的项目中，这是实现解决方案所需的步骤，但是一旦您拥有了指令逻辑（不是ugglified），您就可以通过$元素和$ compile使用指令服务注入完全访问leafpanel