1

我想动态添加 Angular 自定义指令，但 $compile(directive) 产生的指令没有 2-way 绑定。

这是我的简化问题：我正在使用 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

4

1 回答 1

2

您需要返回编译角度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 编译为模板并生成模板函数，然后可以使用该函数将范围和模板链接在一起。

看看这个链接会给你更多的想法

于 2015-06-11T15:04:56.090 回答