簡體   English   中英

如何在angular-leaflet-directive的標記彈出窗口中顯示指令

[英]How to display a directive in a Marker Popup in angular-leaflet-directive

我有一個傳單指示,上面有一堆標記。 單擊標記應打開一個包含許多控件和事件的消息框。 我創建了一個名為infowindow的指令,該指令具有我需要的所有功能。

我這樣創建一個標記:

var umarker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: "<infowindow></infowindow>",                        
};

在這里,我將指令傳遞給message屬性,當我運行<內的所有div時,將顯示。 但是,我也想將參數傳遞給infowindow的范圍,以便可以對其進行編譯。

我嘗試使用以下代碼執行此操作:

var contentString = '<infowindow></infowindow>';
var compiled = $compile(contentString)($scope);

var umarker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: compiled[0],
};

但是,由於出現錯誤“超出了最大調用堆棧大小”,因此無法進行此工作

我還嘗試隔離指令中的范圍,並將參數傳遞給范圍,如下所示

'<infowindow user-details="' + userDetails + '"></infowindow>'

這也不起作用。

誰能幫我解決這個問題,甚至可以解決?

http://jsfiddle.net/xgjdqds4/1/

userDetails是具有有關用戶詳細信息的對象,該用戶由標記表示。

我想出了如何將對象傳遞給指令。 我不確定這是否是最好的方法。 但這有效。

我正在創建標記,並在message屬性中調用指令:

var marker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: "<infowindow></infowindow>",                        
};

然后,將特定標記的自定義屬性添加到范圍,並將范圍傳遞給指令:

getMessageScope: function () {
    var infowindowScope = $scope.$new(true);
    infowindowScope.userDetails = lu;
    return infowindowScope;
},

所以我的標記現在看起來像這樣:

marker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    getMessageScope: function () {
        var infowindowScope = $scope.$new(true);
        infowindowScope.userDetails = lu;
        return infowindowScope;
    },
    message: '<infowindow></infowindow>',
};

完整的代碼:

_.forEach(locatedUsers, function (lu) {
    var umarker = {
        lat: lu.location.latitude,
        lng: lu.location.longitude,
        draggable: false,
        getMessageScope: function () {
            var infowindowScope = $scope.$new(true);
            infowindowScope.userDetails = lu;
            return infowindowScope;
        },
        message: '<infowindow></infowindow>',
    };
    $scope.markers['user_' + lu.id] = umarker;
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM