angularjs - $compile(custom-directive) から生成された HTML は {{values}} をバインドしません

Question

Angular カスタム ディレクティブを動的に追加したいのですが、$compile(directive) から生成されたディレクティブには双方向バインディングがありません。

これが私の単純化された問題です。私はMapBoxを使用しています。マーカーのポップアップにディレクティブを使用して、たとえばマーカーのタイトルを表示したいと考えています。MapBox は HTML を文字列としてポップアップ内に配置する必要があるため、私のアイデアは、 $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());
}

wheremapbox-marker-popupは、次のように指定されたディレクティブです。

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

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

とにかく... mapboxMarkerPopupが機能していません。タイトルは次のように表示されます{{title}}

[UPDATE2 - {{title}} 未解決]

これがJSFiddleです