AngularJS – Dynamic HTML in AngularJS Modal Popup

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’]);

Advertisements

About ambilykk

I am a Technology Evangelist on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Azure and Visual Studio. Technology adoption and learning is my key strength and technology sharing is my passion.
This entry was posted in AngularJs, HTML5 and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s