javascript - 如何使用 jquery 追加包含 Angular Directive(指令)的元素

Question

我正在使用 Angular Meteor 开发一个 Web 应用程序，并以 ECMAscript 6 类风格编写 JS。我需要将一个稍后将被单击的元素动态附加到现有的 div。

我遇到的问题是，当我附加元素时，附加元素的 html 中包含的 Angular ng-mouseover 指令消失并且不起作用。

我希望新附加的元素能够监听悬停事件，而我找到的唯一解决方案是以某种方式使用 $compile。然而，我对 Angular 非常陌生，并且很难理解 $compile 文档，尤其是在尝试将其转换为 ECMAscript 可接受的语法时。谁能帮我正确地做到这一点？

我尝试通过 JQuery 附加元素:

$('#progress-container').append("<img src='greenpin.png' ng-click='chat.hovering($event)' id='" + pinId + "' class='pin' style='left: " + pos + "%'/>");

Answer 1

使用 $compile 就可以了!

$('body').append($compile("<my-angular-directive />")(scope));
scope.$apply();