AngularJS is the JavaScript library from Google for client side development. We will be discussing various issues and resolutions related to AngularJS in a series of blogposts
Requirement: How to embed dynamic html content in AngularJS’s modal popup
Solution
1. Include the sanitize library from http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js to our project
2. Add the ng-bind-html element as shown below in the Modal popup template
<div class=”modal-body”>
<p ng-bind-html=”customHTML“></p>
</div>
3. Add the code to insert dynamic html inside the controller as shown below
var ModalInstanceCtrl = function ($scope, $modalInstance) {
………………………………………..
$scope.customHTML = ‘<h1> Random html snippet at run time </h1>’;
…………………………………………..
};
4. Include the sanitize module to the controller
angular.module(‘myApp’, [‘ui.bootstrap’, ‘ngSanitize’]);