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

【问题标题】：How to $compile a AngularJS directive for html that is in a Leaflet map control?如何为 Leaflet 地图控件中的 html 编译 AngularJS 指令？
【发布时间】：2016-05-18 19:29:48
【问题描述】：

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

模态框是使用类似于<div infomodal="views/modals/popup.html"> 的Angular 指令插入的。

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

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

【问题讨论】：

标签： angularjs leaflet

【解决方案1】：

我通过以下步骤得到它：

在变量中获取主控制器的范围。

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

创建了一个自定义按钮来测试语言的变化

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

将它附加到您的叶子图例控件

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

强制 Angular 编译附加的 HTML 控件，指定主控制器的范围上下文（第一步）
```
angular.injector(['ng']).invoke(function($compile) {
    $compile($div)(scope);
});
```
点击按钮，“魔法”就会发生。 :-)
您可能需要在每次 MapBox 更新后追加（步骤 3）并重新编译（步骤 4）。

由于我不在您的项目之外，因此这是实现解决方案所需的步骤，但是一旦您拥有指令逻辑（未 ugglified），您就可以通过 $element 和 $compile using 指令服务注入完全访问叶面板.

【讨论】：

感谢您的详细解答！它帮助我意识到我正在尝试 $compile div before 已使用 map.addControl() 添加到地图中。