Полученный HTML из $compile(custom-directive) не связывает {{values}}

Question

Я хочу динамически добавлять пользовательские директивы Angular, но директива, полученная из $compile(директива), не имеет двухсторонней привязки.

Вот моя упрощенная проблема: я использую MapBox, и я хочу использовать Директивы для всплывающего окна маркеров, чтобы показать, например, заголовок маркеров. MapBox хочет, чтобы HTML как String помещался во всплывающем окне, поэтому я решил передать $compiled директиву, что-то вроде $compile('<myDirective></myDirective>')($scope).html(),

Он заменяет директиву своим шаблоном, но {{values}} не решены.

У меня есть что-то вроде этого, чтобы создать всплывающее окно

map.featureLayer.on('layeradd', function(e) 
 {
  var marker = e.layer;
  var popupContent =  ctrl.createPopup(marker);
  // popupContent should be HTML as String
  marker.bindPopup(popupContent);
 });

ctrl.createPopup(marker) вызвать функцию контроллера, которая делает:

this.createPopup = function(marker)
{
 var popup = "<mapbox-marker-popup"
            +"      title = "+marker.feature.properties.title
            +"</mapbox-marker-popup>";
 // should return HTML as String
 return  ($compile(popup)($scope).html());
}

где mapbox-marker-popup директива указана следующим образом:

 /* ===== MARKER POPUP DIRECTIVE=========== */

 .directive('mapboxMarkerPopup', function() {
  return {
    restrict: 'E',
    template: [
                "<p>{{title}}</p>",
               ].join(""),
     scope:
        {
         title: '@'
        }
    }    
 })

Во всяком случае... mapboxMarkerPopup не работает. заголовок отображается как {{title}}

[ОБНОВЛЕНИЕ2 - {{title}} не решен]

Вот JSFiddle

Answer 1

Вам нужно вернуть угловую компиляцию element вместо возвращения html этого элемента. Только возврат html никогда не приведет к угловому двухстороннему связыванию. Используя скомпилированный объект, вы можете сохранить работоспособность привязки.

Код

this.createPopup = function(marker) {
    var popup = "<mapbox-marker-popup" + 
      "title = '" + marker.feature.properties.title + "'" 
      + "</mapbox-marker-popup>";
    return ($compile(popup)($scope)[0]);
};

Рабочая скрипка

Обновить

$ компиляции

Компилирует HTML-строку или DOM в шаблон и создает шаблонную функцию, которую затем можно использовать для связи области и шаблона.

Посмотрите на эту ссылку даст вам больше идей