通过mapquest库注入角度指令.未检测到指令

Question

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

我需要通过map.addShape()将此指令添加到Mapquest的地图中。

然而，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.$compile

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

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

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']);
});

结果："错误：应用程序已使用此元素‘document’启动"

如果我能够在添加后编译它，那也没关系。

Answer 1

这有点草率，但对我来说有效。

我可以添加一个伪标签，并将编译后的angular插入其中。

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);
});