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