How to append an element containing an angular directive using 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 + "%'/>");

Read “Thinking in AngularJS” if I have a jQuery background?. — georgeawg
– georgeawg, Commented Feb 1, 2017 at 5:39

Pratik Kapasi · Accepted Answer · 2017-04-21 14:28:29Z

1

Using $compile would do the trick!

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

edited Apr 21, 2017 at 14:28

answered Feb 1, 2017 at 13:30

Pratik Kapasi

901 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to append an element containing an angular directive using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related