如何在angular-leaflet-directive中的Marker Popup中显示指令

时间:2015-12-16 22:11:03

标签: javascript angularjs angular-leaflet-directive

我有一个传单指令,上面有一堆标记。单击标记应打开一个包含大量控件和事件的消息框。我创建了一个名为infowindow的指令,它具有我需要的所有功能。

我创建了一个标记:

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

这里我将指令传递给message属性,当我运行所有div&lt;被展示。但是,我还想将一个参数传递给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是一个对象,其中包含有关用户的详细信息,该用户由标记表示。

1 个答案:

答案 0 :(得分:1)

我想出了如何将对象传递给指令。我不确定这是否是最好的方法。但这很有效。

我正在创建我的标记,并在消息属性中调用指令:

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