Question

我想动态添加Angular自定义指令，但$ compile（指令）产生的指令不具有双向绑定。

这是我的简化问题：我正在使用MapBox，我想使用Directives作为标记＆＃39;弹出窗口，以显示，例如，标记＆＃39;标题。 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}}

[UPDATE2 - {{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]);
};

Working Fiddle

的更新

<强> $编译

将HTML字符串或DOM编译为模板并生成模板函数，然后可用于链接范围和模板在一起。

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

$ compile（custom-directive）生成的HTML不会绑定{{values}}

1 个答案:

的更新