AngularJS Html and Template Binding


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