ng-tip 1: How to use ngSanitize

Today I wanted to render html tags in angularjs app, I tried at first to use the $scope.variable = ‘Hello <strong>World!</strong>’; inside the controller and in the html page {{variable}} I got a raw html like this:

Hello <strong>World!</strong>

I searched for a while and found out that angularjs escape expressions so to make html tags render correctly I should do the following:

• Download angular-sanitize module and include it in the html page
• add ngSanitize in the module dependencies, var app = angular.module(‘myApp’, [‘ngSanitize’]);
• Add the required expression in the controller: $scope.variable = ‘Hello <strong>World!</strong>’;
• In the view page: <div ng-bind-html=”variable”></div>

Now the html will be rendered correctly

Hello World!

Note: ng-bind-html functionality will validate Html and log errors in the console window. To disable this validation, ex.: for production environments, use the following code:

<div ng-bind-html=”skipValidation(variable)”></div>

In the controller add:

$sce service in the controller arguments:
app.controller(‘myCtrl’, function($scope, $sce){

$scope.skipValidation = function(value){ $sce.trustAsHtml(value);
};

}