来自 $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());
}

其中 mapbox-marker-popup 是如下指定的指令：

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

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

无论如何...mapboxMarkerPopup 不工作。标题显示为{{title}}

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

这是JSFiddle

Answer 1

您需要 return 编译 angular element 而不是 returning html 该元素。只有 returning html 永远不会携带 angular 双向绑定。通过使用编译对象，您可以保持绑定正常工作。

代码

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

Working Fiddle

更新

$编译

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

看看this link会给你更多的想法

来自 $compile(custom-directive) 的结果 HTML 不绑定 {{values}}

resulting HTML from $compile(custom-directive) doesn't bind {{values}}

angularjs

mapbox

angularjs-directive

angularjs-scope

angularjs-compile

更新