Compile angular controller inserted by javascript dynamically?

Question

Im working in an app that creates html dynamically. We started using angular so now we are trying to create html using angular.element() and defining a controller in it.

angular.element("<div ng-controller='myController'/>");

The problem is, that as it is created after the page renders (when an user clicks somewhere, for example), the html inserted is not working with angular, is like plain html. How can I solve it?

angular.element() return wrapper object of jqlite. You will have to use $compile service instead — Samir Das
– Samir Das, Commented Jun 5, 2015 at 18:02
Thanks, @Samir, is the $compile service available from the global angular class? like angular.$compile ? or should I include it somehow in the script that is creating the element? The script that is creating the element is not inside a controller or directive... — Paulo Madroñero
– Paulo Madroñero, Commented Jun 5, 2015 at 18:06
Nope it is not available in global scope. It is angular service. You will have to inject through your controller. — Samir Das
– Samir Das, Commented Jun 5, 2015 at 18:15

Community · Accepted Answer · 2017-05-23 12:21:56Z

0

I use this way:

var template = angular.element(YOU_HTML_IN_STRING);
var linkFn = $compile(template);
var element = linkFn($scope);
angular.element(CSS_SELECTOR).html('').append(element);

If you don't have access to $compile. You can have a look here: how can we use $compile outside a directive in Angularjs

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jun 5, 2015 at 18:23

Raúl Martín

4,7293 gold badges26 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Compile angular controller inserted by javascript dynamically?

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