0

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?

Paulo Madroñero
  • 320
  • 4
  • 14
  • 2
    `angular.element()` return wrapper object of jqlite. You will have to use `$compile` service instead – Samir Das Jun 05 '15 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 Jun 05 '15 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 Jun 05 '15 at 18:15

1 Answers1

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

Community
  • 1
  • 1
Raúl Martín
  • 4,471
  • 3
  • 23
  • 42