AngularJS : ng-bind-html and ng-non-bindable Directives

What are ng-bind-HTML Directives?

The ng-bind-HTML directive is used for attaching the content to the HTML element in a secure method and renders the HTML as clickable anchor tags. To make use of this directive, you should use angular-sanitize.js in your application to make use of the $sanitize service.

The word sanitize mean clean and purify that sanitizes the HTML content and allow safe HTML markup which does not contain dangerous attributes. The content which is managed by the $sanitize will be considered as trusted content by the Angular.
You can use the $sanitize service implicitly by adding an additional script to the page using below CDN:

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"&gt; &lt;/script&gt;

ng-bind-HTML Syntax

The ng-bind-HTML directive has the following syntax:

&lt;tag_name ng-bind-html="expression"&gt;&lt;/tag_name&gt;

Where:
tag_name will be any element such as div, span etc and expression contains a variable or expression which can be attached to the scope object.

ng-bind-HTML Example

The below example demonstrates the use of the ng-bind-HTML directive in the AngularJS:

&lt;html&gt;
&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;AngularJS ng-bind-html Directive&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var app = angular.module('myapp', ['ngSanitize']);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app.controller('myController', ['$scope',function($scope) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $scope.myVal = 'Welcome to AngularJS..' +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'Click the link to visit &lt;a href="https://docs.angularjs.org/api"&gt;AngularJS Site&lt;/a&gt;';
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt;
&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp; &lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div ng-app="myapp"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div ng-controller="myController"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p ng-bind-html="myVal"&gt;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;/body&gt;
&lt;/html&gt;

ng-bind Directives

To use the functionality of ng-bind-HTML directive, first, use the additional script for using $sanitize service and include it within the head tag.
The module is created by the angular. module function which takes the parameter “app” that refers to the HTML element ng-bind.
To use the $sanitize service, define the ngSanitize as the dependency in the module.
You can add controllers, directives, filters etc to the application by using the “app” parameter.
The controller can be attached to the DOM by using the ng-controller directive and set up the initial state of scope by attaching property to $scope object.
The ng-bind-HTML directive attaches the HTML content to the element by using the scope object myVal.

Running ng-bind-HTML Sample Application

Let’s save the above code in an HTML file as ng-bind-HTML-example.html in the server root folder and open this HTML file in a standard browser as http://localhost/ng-bind-HTML-example.html and you will get the output as displayed below:

What are ng-non-bindable Directives?

The ng-non-bindable directive can be used when you don’t want to compile or attach the content to the HTML element. In other words, the specified content should not be compiled by the AngularJS application.

ng-non-bindable Syntax

The ng-non-bindable directive has the following syntax:

&lt;tag_name ng-non-bindable&gt;&lt;/tag_name&gt;

This directive does not contain any parameters.

ng-non-bindable Example

The below example demonstrates the use of the ng-bind directive in the AngularJS:

&lt;html&gt;
&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;AngularJS ng-non-bindable Directive&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
&nbsp; &lt;/head&gt;
&nbsp;&nbsp; &lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div ng-app=""&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;The bindable data: {{10 + 10}}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;The non bindable data:&nbsp; &lt;span ng-non-bindable&gt;{{10 + 10}}&lt;/span&gt;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;/body&gt;
&lt;/html&gt;

- The ng-app directive defines the AngularJS application and specifies the root element of the application.
- We have used double braces {{ }} to display the content of the application.
- The ng-non-bindable directive will not compile and binds the data to the HTML element.
- The data between double curly braces defined along with the ng-non-bindable directive will not bind data to HTML element and remains the same content.

Running ng-non-bindable Sample Application

Let’s save the above code in an HTML file as ng-non-bindable-example.html in the server root folder and open this HTML file in a standard browser as http://localhost/ ng-non-bindable-example.html and you will get the output as displayed below: