ng-bind

Table of Contents

ng-bind directive is used to bind a model-value to some DOM element for display.

Angular.JS Example

<HTML>
<HEAD>
    <title>Angular.JS Controller - PrismoSkills</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</HEAD>

<BODY> 

<div ng-app="" ng-init="x=5; y=10">
 	<p>X: <input type="text" ng-model="x"></p> 
	<p>Y: <input type="text" ng-model="y"></p>
 	<p> X: <span ng-bind="x"></span></p>
 	<p> Y: <span ng-bind="y"></span></p>
 	<p> X + Y: <span ng-bind="x * y"></span></p>
</div>
</BODY>
</HTML>

Result:

X * Y:

Explanation of ng-bind directive

ng-bind replaces the inner HTML of the bound element with the expression specified.
It may look cumbersome as compared to {{}} but ng-bind is more performant as well as displays better in UI.

Display:

While AngularJS is loading, the user might see the curly brackets in the html if {{}} are used.

Performance:

ng-bind places a watcher on the passed variable and is applied only when the passed value actually changes.
The brackets on the other hand are dirty checked and refreshed in every $digest, thus making them very slow (around 20% more slower) if plenty of {{}} are used in a page.

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal