How to use $compile in Angular to export HTML to external function

Question

I have an issue where I can't send compiled HTML to an external function. I can do it if I do everything within the Angular app space. But when I send my compiled result to an external function it is not rendering anymore. Anyone got any idea why this isn't working, or even better a solution how to make it work?

My external function (exists outside of the angular app)

<script>
  var ext = {};

  ext.addFunction(elem) {
    $('#eventListExtFunction').html(elem);
  }
</script>

My directive (calls the external function with the compiled HTML)

var eventListElem = angular.element('<event-list-ext></event-list-ext>'),
    extElem = $compile(eventListElem)(scope);

// Add to external through function
ext.addFunction(extElem);

See this plunker for more info about what I am trying to accomplish: http://plnkr.co/edit/HkCGFsBX751oPyXgzKEn?p=preview

there is an error saying ReferenceError: ext is not defined! what is ext? — Arun P Johny
– Arun P Johny, Commented Oct 14, 2014 at 7:18

ajndl · Accepted Answer · 2014-10-14 07:26:44Z

1

Check your syntax. There's a problem on the third line:

var ext = {};

ext.addFunction(elem) {
  $('#eventListExtFunction').html(elem);
}

when it should be:

var ext = {};

ext.addFunction = function(elem) {
  $('#eventListExtFunction').html(elem);
}

answered Oct 14, 2014 at 7:26

ajndl

3941 silver badge7 bronze badges

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

1 Comment

ajndl Over a year ago

@KungWaz I screw that kind of thing up all the time :-) one thing that might help is JSLint. It'll check that kind of stuff.

Collectives™ on Stack Overflow

How to use $compile in Angular to export HTML to external function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related