通过 mapquest 库注入 angular 指令。未检测到指令答案

【问题标题】：Injecting angular directive through mapquest library. Directive not detected通过 mapquest 库注入 angular 指令。未检测到指令
【发布时间】：2015-02-07 09:30:10
【问题描述】：

我有一个指令，<flightpoint></flightpoint>。

我需要通过map.addShape()将此指令添加到Mapquest's map。

但是，angular 不知道地图上的新指令，因此它不会处理它（它的空白 html）。

MQA.withModule('htmlpoi', function() {
  var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
  poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
  var x = routeMap.addShape(poi);
});

我尝试过的一些事情.....

1. $编译

MQA.withModule('htmlpoi', function() {
  var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
  poi.setHtml($compile("<flightpoint></flightpoint>")($scope), -6, -20, 'mqa_nostyle_htmlpoi');
  var x = routeMap.addShape(poi);
  $scope.$apply();
});

结果： [object Object] 显示在地图上，而不是我的指令。

2. angular.bootstrap()

MQA.withModule('htmlpoi', function() {
  var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
  poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
  var x = routeMap.addShape(poi);
  angular.bootstrap(document, ['app']);
});

结果：“错误：应用程序已使用此元素“文档”引导”

如果我能在添加后编译它也可以。

【问题讨论】：

您是否记得在您的 html 脚本标签中包含指令的 javascript 文件？我之前忘记了……
好主意。是的。如果我将指令放在它工作的页面中，它只会在我注入它时不起作用。

标签： angularjs mapquest

【解决方案1】：

这有点草率，但它对我有用。

我可以添加一个虚拟标签并将编译后的角度插入其中。

MQA.withModule('htmlpoi', function() {
  var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
  poi.setHtml("<span id=\"insertDirectiveHere\"></span>", -6, -20, 'mqa_nostyle_htmlpoi');
  routeMap.addShape(poi);

  // now that you've added the span we can insert compiled angular on that tag
  var domElem = document.getElementById('insertDirectiveHere');
  domElem.innerHTML = "<flightpoint></flightpoint>";
  $compile(domElem)($scope);
});

【讨论】：