Question

我有一个指令<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。 $ 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']);
});

结果：＆＃34;错误：应用已使用此元素＆＃39;＆＃39;＆＃34;＆＃34;

自行启动

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

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

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

1 个答案: