Angular 在传单地图上动态生成代码答案

【问题标题】：Angular dynamically generated code on leaflet mapAngular 在传单地图上动态生成代码
【发布时间】：2015-10-23 12:51:06
【问题描述】：

我在 Angular 中有一些应用。那是我的html代码。

<div ng-app="mapApp">
    <div ng-controller="mainController">
       <leaflet id="map" center="center" height="640px" width="100%"></leaflet>
    </div>
</div>
<div id="templates">
    <script type="text/html" id="someTemplate">
        <div>
            // need Angular scope here!
            <h4>{{label}}</h4>
            <button class="btn btn-primary" ng-click="{{someFunction}}">
            </button>
        </div>
    </script>
</div>

Javascirpt 控制器实现：

app.controller("mainController", function($scope,  $rootScope, $compile, leafletData) {
   $scope.map = null;
   $scope.template = $("#someTemplate").html();

   leafletData.getMap('map').then(function(map) {
        $scope.map = map;
   });

   $scope.drawSomePopup = function(object) {
       var popupElement = Mustache.to_html($scope.template, templateData)

       var popup = L.popup().setContent(popupElement);
       var poly = L.polygon(object.boundary.geoPoint, {color: 'red'})
                .addTo($scope.map)
                .bindPopup(popup);
   };

   drawSomePopup($rootScope.someObject);

   $scope.someFunction = function(object) {
       //some operations
   };
}

我试图在生成的元素上使用 $compile 服务，但它不起作用。像这样的解决方案：

$compile( $("map") )

也不行。模板元素上的全局函数onclick 是一些解决方案，但我想避免这种情况。

这个例子有解决方案吗？

【问题讨论】：

你想达到什么目的？我不明白问题/问题是什么。
生成的弹出窗口不在角度范围内。模板包含“ng-click”指令，但角度不将它们与控制器中的功能绑定。

标签： angularjs leaflet mustache angular-leaflet-directive

【解决方案1】：

我找到了解决办法。

$scope.drawSomePopup = function(object) {
    var popupContent = Mustache.to_html($scope.template, templateData); 
    var popup = L.popup();
    var linkFunction = $compile(angular.element(popupContent));
    popup.setContent(linkFunction($scope)[0]);

    var poly = L.polygon(object.geoPoint, {color: 'red'}).addTo($scope.map);
    poly.bindPopup(popup);
};

Popup 必须先重新编译，然后附加到 DOM。

【讨论】：