必应地图上带有 Angular 指令内容的自定义图钉

Question

我正在使用 Bing 地图 AJAX 控件来显示地图。 我已经为我想放在地图上的图钉创建了一个 Angular 指令：

app.directive('myPin', function(){
    return {
        restrict: 'E',
        templateUrl: '<p>{{title}}</p>'
    }
})

在我的 Angular 控制器中，我设置了地图，然后将 (a) Pin(s) 添加到它，如下所示：

// Define the title for the Pin
$scope.title = 'Test title';

// Define the location and the options for the Pin
var location = new Microsoft.Maps.Location(52.48, 13.42);
var pushpinOptions = {
    width: null,
    height: null,
    htmlContent: '<my-pin></my-pin>'
};

// Push the Pin onto the map
map.entities.push(new Microsoft.Maps.Pushpin(location, pushpinOptions));

很遗憾，但很明显，我的自定义图钉也没有显示在地图上，因为“htmlContent”部分是由 Bing 服务动态注入到 DOM 中的。我已经尝试了很多 Angular 的 $compile 服务，但我不知道如何让它工作......

Answer 1

我设法让它为信息框工作，我想它与图钉一样工作。 请注意，这是一个粗略的工作副本，需要进一步改进才能使其更好。它几乎完全以尽可能远离角度的方式完成。我想我会分享看到，因为还没有人设法以对我有用的方式回答这个问题。

我分两步完成：将htmlContent 设置为带有 ID 的空 div：

标记模板：

<div id="infoBox" style="display: none"><div id="infoboxText"></div></div>
<div id="infoBoxContents" style="display: none;"><b id="infoboxTitle" ng-bind="vm.searchResult"></b><p id="infoboxDescription">Select this address as the correct address? <button ng-click="vm.selectAddress()">Yes!</button></p></div>

控制器“搜索成功功能”

this.searchSuccess = function (geocodeResult, userData) {
    ...
    this.map.entities.clear(); //remove existing infoboxes from the map
    var template = $('#infoBox').html(); //<div id="infoboxText"></div>
    var pin = new Microsoft.Maps.Pushpin(location, { draggable: false });
    var infoboxOptions = {
        pushpin: pin
    };
    var defaultInfobox = new Microsoft.Maps.Infobox(_this.map.getCenter(), infoboxOptions);
    defaultInfobox.setHtmlContent(template);
    this.map.entities.push(defaultInfobox); //add it to the map
    this.addContentToInfobox();
}

this.addContentToInfobox = function() {
    var rawContentHtml = $('#infoBoxContents').html();
    $("#infoboxText").html(_this.$compile(rawContentHtml)(_this.$scope));
    this.$scope.$apply();
}

FIDDLE：（需要 API 密钥）：http://jsfiddle.net/KyleMuir/m9ato59v/

Answer 2

我终于成功了。

var devicePanel = '<div ng-include src=" \'/templates/Device/Map/_devicePanel.html\' "></div>'
var template = this.$compile(devicePanel)(this.$scope);

var pushPinItem;
for (var x = 0; x < this.map.entities.getLength(); x++) {
    pushPinItem = this.entities.get(x);
    if (pushPinItem instanceof Microsoft.Maps.Pushpin) {
        pushPinItem.setOptions({ htmlContent: template[0].outerHTML });
    }
}

这适用于初始布局。您可能需要 $apply 任何更改以确保模板已更新。