0

I have Jquery code which generates a widget for use in a site. We have several products, one of which is angularjs based.

Is it possible to run the Jquery widget on the page and then interpolate the output with angularjs? What I would like is for my template (loaded with jquery append) to contain some angularjs directives or output and to then be able to call $interpolate on the page once jquery has done its bit.

So for example if a partial was to contain this

<div ng-controller="blah">
    <div id='jquery-target'>
    </div>
</div>

<script>
    $('jquery-target).append(blah);
</script>

Is it possible to do this in a way that doesn't involve a complete re-write of the jquery widget? Preferably if I were to trigger an event when the jquery was finished loading and be able to have angular run another pass over the page looking for directives and {{}}

LiamRyan
  • 1,892
  • 4
  • 32
  • 61

1 Answers1

1

You cannot inject HTML into Angular and have it work. At a minimum you will need to wrap the JQuery widget in a directive.

<div ng-controller="blah">
    <div jquery-target>
    </div>
</div>

Then define the directive.

module.directive('jqueryTarget', function() {
    return {
        template: function(element, attrs) {
            var blah = '' // generated html.
            return blah;
        },
    }
})
Enzey
  • 5,254
  • 1
  • 18
  • 20
  • Thanks, I was hoping to avoid writing directives but I guess I'm going to have to bite the bullet – LiamRyan Dec 03 '14 at 10:04
  • While looking at how to structure my directive I stumbled across this answer which I would recommend for anyone in my situation - http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs – LiamRyan Dec 03 '14 at 10:38
  • That answer you linked refers to using $compile in a controller. Controllers should never manipulate DOM. Doing so will lead you down a path of creating untestable code. – Enzey Dec 03 '14 at 16:05
  • However it does achieve exactly what I need, I don't think I could realistically test the intersection of my jQuery and angularjs in any case – LiamRyan Dec 03 '14 at 16:11