AngularJS Html and Template Binding

By
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>

Output:

Name: 

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>

Output:

Welcome In The <b>Angular JS</b>
Welcome In The Angular JS

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>

Output

Rothbard Murray

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>

Output:

Bindable : 3
Non Bindable : {{1+2}}
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 }}.









No comments:

Post a Comment