Interpolate html added with jquery in angularjs

Question

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 {{}}

You'd have to manually compile blah: docs.angularjs.org/api/ng/service/$compile — jValdron
– jValdron, Commented Dec 2, 2014 at 18:29

Enzey · Accepted Answer · 2014-12-03 07:41:11Z

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;
        },
    }
})

edited Dec 3, 2014 at 7:41

answered Dec 3, 2014 at 0:10

Enzey

5,2541 gold badge20 silver badges20 bronze badges

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

4 Comments

LiamRyan Over a year ago

Thanks, I was hoping to avoid writing directives but I guess I'm going to have to bite the bullet

LiamRyan Over a year ago

While looking at how to structure my directive I stumbled across this answer which I would recommend for anyone in my situation - stackoverflow.com/questions/11771513/…

Enzey Over a year ago

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.

LiamRyan Over a year ago

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

Collectives™ on Stack Overflow

Interpolate html added with jquery in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related