Rendering a compiled template from controller in Angular JS

Question

I am trying to render some html to the DOM that has AngularJS directives

HTML

<a ng-click="doThing()">hello 2015</a>

Except due to constraints in my application, I have to add it to the view from the controller. I am attempting to do this using the $compile service.

Controller.js

let html = '<a ng-click="doThing()">hello 2015</a>';

const compiledTemplate = $compile(html)($scope);

document.getElementById('wrapper').innerHTML = compiledTemplate[0].innerHTML;

$scope.doThing = function(){

    console.log('it worked!');
}

View.html

<div id="wrapper"></div>

This renders the correct HTML but the directives dont work. Clicking on the link does not fire the doThing() function.

How can I compile and render a string representation of an AngularJS template such that all angular directives are functional?

Duncan Thacker · Accepted Answer · 2019-02-01 01:07:36Z

1

Your code doesn't work because you're just copying the raw HTML string out of the compiled directive - none of the bindings are copied, just the string.

Best to call $compile() with a HTML element instead of with an HTML string, like this:

//find the wrapper DOM element
const directiveTarget = document.getElementById('wrapper');

//put the raw HTML into it
directiveTarget.innerHTML = '<a ng-click="doThing()">hello 2015</a>';

//get the angularjs-friendly version of the element
const directiveElement = angular.element(directiveTarget);

//initialise AngularJS bindings
const compiledTemplate = $compile(directiveElement)($scope);

answered Feb 1, 2019 at 1:07

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

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

2 Comments

yevg Over a year ago

this was the solution. I dont know why I thought compiling the raw html would work. thank you!

Duncan Thacker Over a year ago

Any time. Good luck with your project!

Collectives™ on Stack Overflow

Rendering a compiled template from controller in Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related