0

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 + "%'/>");
Michael Bremerkamp
  • 314
  • 3
  • 11

1 Answers1

1

Using $compile would do the trick!

$('body').append($compile("<my-angular-directive />")(scope));
scope.$apply();
Pratik Kapasi
  • 90
  • 1
  • 6