如何使用jQuery追加包含角度指令的元素

Question

I am working on a web app using angular meteor and writing JS in ECMAscript 6 class style. I need to append an element, that will later be clicked on, to an existing div dynamically.

The problem I am having is that when I append the element, the angular ng-mouseover directive contained within the appended element's html disappears and does not work.

I want the newly appended element to listen for hover events, and the only solution I have found for doing so is to somehow use $compile . However, I am extremely new to Angular and struggled to understand the $compile documentation, especially when trying to convert it into ECMAscript acceptable syntax. Can anyone help me do this correctly?

My attempt at appending the element via JQuery:

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

Answer 1

Using $compile would do the trick!

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