Инъекционная угловая директива через библиотеку скринсейверов. Директива не обнаружена

Question

У меня есть директива, <flightpoint></flightpoint>.

Мне нужно добавить эту директиву в Mapquest's map через map.addShape().

Однако угловой не знает о новой директиве на карте, поэтому она не обрабатывает ее (ее пустой html).

MQA.withModule('htmlpoi', function() { 
    var poi=new MQA.HtmlPoi({lat:39.743943, lng:-105.020089}); 
    poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi'); 
    var x = routeMap.addShape(poi); 
}); 

---

несколько вещей, которые я пробовал .....

1. $ компилировать

MQA.withModule('htmlpoi', function() { 
    var poi=new MQA.HtmlPoi({lat:39.743943, lng:-105.020089}); 
    poi.setHtml($compile("<flightpoint></flightpoint>")($scope), -6, -20, 'mqa_nostyle_htmlpoi'); 
    var x = routeMap.addShape(poi); 
    $scope.$apply(); 
}); 

Результат: отображается [объект Object] на вместо моей директивы.

2. angular.bootstrap()

MQA.withModule('htmlpoi', function() { 
    var poi=new MQA.HtmlPoi({lat:39.743943, lng:-105.020089}); 
    poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi'); 
    var x = routeMap.addShape(poi); 
    angular.bootstrap(document, ['app']); 
}); 

Результат: "Ошибка: App Уже бутстрапируемых с этим элементом 'документ'"

Если бы я был в состоянии собрать его после того, как его было добавлено, что тоже будет хорошо.

Answer 1

Это немного неряшливо, но оно работает для меня.

Я могу добавить фиктивный тег и вставить скомпилированные угловые в него.

MQA.withModule('htmlpoi', function() { 
    var poi=new MQA.HtmlPoi({lat:39.743943, lng:-105.020089}); 
    poi.setHtml("<span id=\"insertDirectiveHere\"></span>", -6, -20, 'mqa_nostyle_htmlpoi'); 
    routeMap.addShape(poi); 

    // now that you've added the span we can insert compiled angular on that tag 
    var domElem = document.getElementById('insertDirectiveHere'); 
    domElem.innerHTML = "<flightpoint></flightpoint>"; 
    $compile(domElem)($scope); 
});