Rendering directives within $sce.trustAsHtml

by

$sce.trustAsHtml and ng-bind-html are not meant to build HTML with directives. This technique will not work.

This is because angular works by first compiling and then linking. See the conceptual overview for a good explaination.

In short, by the time you link the HTML defined in your trustAsHtml, it is too late for angular to compile (and therefore understand) the ng-click directive.

In order to dynamically add HTML, you should be looking at the $compile service (and/or directives). Docs are here.

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  3. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  4. Confused about Angularjs transcluded and isolate scopes & bindings
  5. Directive isolate scope with ng-repeat scope in AngularJS
  6. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  7. AngularJS : ng-repeat filter when value is greater than
  8. angularjs share data config between controllers
  9. How to modify scope from within a directive in AngularJs
  10. Call a method of a controller from another controller using ‘scope’ in AngularJS
  11. How to detect browser using angularjs?
  12. ng-click doesn’t work within the template of a directive
  13. Access Parent Scope in Transcluded Directive
  14. Controller not a function, got undefined, while defining controllers globally
  15. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  16. angular ng-bind-html and directive within it
  17. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  18. Get value when selected ng-option changes
  19. Custom form validation directive to compare two fields
  20. AngularJs: Reload page
  21. Dynamic form name attribute in Angularjs
  22. Binding variables from Service/Factory to Controllers
  23. AngularJS custom form component / directive using ng-model
  24. How can you limit the value from input using AngularJS?
  25. How to set the dynamic controller for directives?
  26. Enable/Disable Anchor Tags using AngularJS
  27. Illegal use of ngTransclude directive in the template
  28. How to use `replace` of directive definition?
  29. How to implement an ng-change for a custom directive
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment