Compiling dynamic HTML strings from database

by

ng-bind-html-unsafe only renders the content as HTML. It doesn’t bind Angular scope to the resulted DOM. You have to use $compile service for that purpose. I created this plunker to demonstrate how to use $compile to create a directive rendering dynamic HTML entered by users and binding to the controller’s scope. The source is posted below.

demo.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Compile dynamic HTML</h1>
    <div ng-controller="MyController">
      <textarea ng-model="html"></textarea>
      <div dynamic="html"></div>
    </div>
  </body>

</html>

script.js

var app = angular.module('app', []);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

function MyController($scope) {
  $scope.click = function(arg) {
    alert('Clicked ' + arg);
  }
  $scope.html="<a ng-click="click(1)" href="#">Click me</a>";
}

More Related Contents:

  1. With ng-bind-html-unsafe removed, how do I inject HTML?
  2. How do search engines deal with AngularJS applications?
  3. How can I scale the content of an iframe?
  4. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  5. AngularJS ngClass conditional
  6. How do I delete an item or object from an array using ng-click?
  7. What characters are allowed in DOM IDs? [duplicate]
  8. Why does firebug add to ?
  9. What is DOM reflow?
  10. ng-app vs. data-ng-app, what is the difference?
  11. href overrides ng-click in Angular.js
  12. How to get a child element to show behind (lower z-index) than its parent?
  13. Why does a stray end tag generate an empty paragraph?
  14. How does Selenium click on elements that are 50% on screen and 50% not on screen?
  15. Spring Boot with AngularJS html5Mode
  16. $http doesn’t send cookie in Requests
  17. Angular2, what is the correct way to disable an anchor element?
  18. Google bot crawling on AngularJS site with HTML5 Mode routes
  19. Why is a self-closing iframe tag preventing further DOM elements to be displayed?
  20. jQuery click function doesn’t work after ajax call? [duplicate]
  21. What is shadow root
  22. How to specify model to a ngInclude directive in AngularJS?
  23. Which DOM elements can be child of tr?
  24. how to show pdf file in ionic app with out download
  25. AngularJS: Insert HTML from a string
  26. DOM mutation events replacement
  27. What are the CSS properties that get elements out of the normal flow?
  28. What does #/ means in url?
  29. In the DOM are node ids case sensititve?
  30. Angular Checkboxes “Select All” functionality with only one box selected initially

Leave a Comment