在标记弹出角度指令角单张，指令自定义消息HTML。如何？ [英] angular-leaflet-directive custom message html with angular directives in marker popup. How to?

问题描述

我要插入与$范围的​​事件处理我的自定义HTML标记传单标记的消息属性。例如：

I want to insert my custom html markup with $scope event handlers to message property of leaflet marker. For example:

App.controller('testController', ['$scope', "leafletEvents", '$compile', 'leafletMarkersHelpers',
function($scope, leafletEvents, $compile, leafletMarkersHelpers){

angular.extend($scope, {
    currentLocation : {
        lat: 20,
        lng: 20,
        zoom: 20
    },
    markers: {
    },
    defaults: {
        scrollWheelZoom: true
    },
    events: {
        map: {
            enable: ['zoomstart', 'drag', 'click', 'mousemove', 'popupopen'],
            logic: 'emit'
        },
        markers: {
            enable: leafletEvents.getAvailableMarkerEvents()
        }
    }
});
var html = " <a href=''>info</a><button type='button' ng-click='doSomeAction()'>Choose</button>";
var item = {...}; //some data for marker
            $scope.markers["newMarker"] = {
                lat: item.lat,
                lng: item.lng,
                message: item.message + html,
                draggable: false
            }

所以doSomeAction（）方法不触发，因为控制器不绑定它来查看。我试着做下一个东西：

So doSomeAction() method doesn't triggers because controller doesn't bind it to view. I tried to do next stuff:

 //this code belongs to the same controller
 //data.leafletEvent.popup._content  html set for popup message before.
 $scope.$on('leafletDirectiveMap.popupopen', function(event, data){
    var html = "<p>" + data.leafletEvent.popup._content + "</p>";
    var template = angular.element(html);
    $compile(html)($scope);
    $scope.$digest();
});
$scope.doSomeAction = function() {
//never fires
   console.log(arguments);
}

但它不工作。因此，如果任何人有想法，请随时分享。

But it doesn't work. So if anyone has ideas please feel free to share.

推荐答案

您现在可以轻松地使用角模板弹出消息：

You can now easily use Angular templates in a popup message:

var html = " <a href=''>info</a><button type='button' 
   ng-click='doSomeAction()'>Choose</button>";

$scope.markers.push({ lat: ..., 
                      lng: ...,
                      message: html,
                      getMessageScope: function() {return $scope; }
                    });

这篇关于在标记弹出角度指令角单张，指令自定义消息HTML。如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！