Angular Html Binding and Template Binding

AngularJS Html and Template Binding

« Previous

Angularjs provide some predefined data binding directive which are very useful in one way binding:

ng-bind : This directive will bind the inner Text property of an HTML element.

ng-bind-template : This is just similar to the ng-bind directive but allow for multiple templates.

ng-bind-html : This directive will bind the inner HTML property of an HTML element

Here is the examples of ng-bind and ng-bind-html:

ng-bind:

Ng-Bind Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p>Name: <input type="text" ng-model="name" /></p>
        <div ng-bind="name"></div>
    </div>
</body>
</html>

Try it » Download Example »

Output

What is Ng-Bind-Html?

The ng-bind-html directive used to bind the html to element in a secure way. The assigned html to this directive will be sanitized by the $sanitize service. Make sure that "$sanitize" is available to use this directive. For $sanitize service you need to include ngSanitize dependency in the module and to use this dependency “angular-sanitize.js” need to be include in the application. Lets see the example of ng-bind-html.

Ng-Bind-Html Example

<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>Welcome in the Angular JS</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-sanitize.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController" >
    <div ng-bind="title"></div>
    <div ng-bind-html="title"></div>
  </div>
<script> 
  var app = angular.module("sampleApplication", ['ngSanitize']); 
  app.controller("sampleController", function($scope) { 
    $scope.title="Welcome In The <b>Angular JS</b>"; 
  }); 
</script>
</body>
</html>

Try it » Download Example »

Output

See the example in the first div element the title variable is bind to this element and title variable contains html <b></b> tag.Since the ng-bind directive does not read the html so the title displayed as it is. But in the second div element ng-bind-html directive is used so the text “Angular JS” displayed in bold.

What is Ng-Bind-Template?

The ng-bind-template directive used when we need to bind multiple expressions. In the ng-bind directive we cannot use more than one expression. See the example.

Ng-Bind-Template Example

<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>Welcome in the Angular JS</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController" >
    <div ng-bind="{{firstName}} {{lastName}}"></div>
    <div ng-bind-template="{{firstName}} {{lastName}}"></div>
  </div>
<script> 
  var app = angular.module("sampleApplication", []); 
  app.controller("sampleController", function($scope) { 
    $scope.firstName="Rothbard"; 
    $scope.lastName="Murray"; 
  }); 
</script>
</body>
</html>

Try it » Download Example »

Output

In the first div element the ng-bind directive have two expressions so that {{ firstName }} and {{ lastName }} will not be displayed because ng-bind directive accept only one expression. In the second div element the expressions bind to the ng-bind-template directive so it will display the firstname and lastname.

What is Ng-Non-Bindable and its example?

The ng-non-bindable directive used when you do not want to compile or bind application data to the html element . ng-non-bindable is useful when you want to display some code or expression as it is. For example if you want to display {{ 1+2 }} as it is in UI, Angular will evaluate this expression and will display 3 instead of {{ 1+2 }}. If you write ng-non-bindable as a attribute to the element Angular will not compile this expression. Lets see a very simple example of ng-non-bindable.

Ng-Non-Bindable Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div>Bindable : {{1+2}}</div>
        <div ng-non-bindable>Non Bindable : {{1+2}}</div>
    </div>
</body>
</html>

Try it » Download Example »

Output

In the first div element we write a expression {{1 + 2}}, Angular JS compile this expression and will display “3” because Angular compiles the expression if it is in the double curly braces. In the second div element ng-non-bindable directive being used and Angular will not compile this expression and we get the output as {{ 1 + 2 }}.

« Previous