Question

我想将带有$ scope事件处理程序的自定义html标记插入到传单标记的message属性中。例如：

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（）方法不会触发，因为控制器不会将其绑定到视图。我试着做下一件事：

 //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);
}

但它不起作用。所以，如果有人有想法，请随时分享。

Answer 1

现在，您可以在弹出消息中轻松使用Angular模板：

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; }
                    });

angular-leaflet-directive自定义消息html，带有标记弹出窗口中的angular指令。如何？

1 个答案: