ngBind directive
ngBind directive is mostly applied to a span element, it replaces the content of the span with the result of the expression provided. It has the same meaning as the double curly braces {{expression}}.Lets look into the following example of ngBind directive usage.
<!DOCTYPE html>
<html ng-app="bindApp">
<head>
<meta charset="ISO-8859-1">
<title>ngBind Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
</script>
<script>
angular
.module("bindApp", [])
.controller("bindCtrl", function($scope)
{
$scope.printWelcomeMesage = function(username)
{
$scope.welcomeMessage = 'Welcome ' + username + " !!!"
};
});
</script>
</head>
<body ng-controller="bindCtrl">
<strong><span ng-bind="welcomeMessage"></span></strong></br>
<label>Username Name :</label>
<input type="text" ng-model="username"></br>
<button ng-click="printWelcomeMesage(username)">Submit</button>
</body>
</html>
Output :
- In the above code whenever the user enters the value in the text box and hits on the submit button it passes the value of username to our script. The username value will be passed to our controller through the printWelcomeMessage() method.
- Once the Angular Script received the username, we are appending the “Welcome” string to it and assign it to scope variables $scope.welcomeMessage
- Since AngularJS follows two-way binding and we have used the same variable in the UI and as well as the script, the value will be displayed in the expression {{}}
Difference Between {{}} and ngBind directive
Here comes the question why there is a need for ng-bind directive when there is an alternate available? So lets understand the difference between double curly {{}} and ngBind directive. ngBind is better than {{}} this is because when we use double curly braces {{}} when the page is getting compiled, for a moment the raw expression will be shown to the user. Where as in the case of ng-bind it is not visible to the user as the directive is defined by the attribute of the element. Lets look into the sample code below
<!DOCTYPE html>
<html ng-app="bindApp">
<head>
<meta charset="ISO-8859-1">
<title>double curly ngbind difference</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
</script>
<script>
angular
.module("bindApp", [])
.controller("bindCtrl", function($scope)
{
$scope.username = "JavaInterviewPoint";
});
</script>
</head>
<body ng-controller="bindCtrl">
Double Curly Username : <strong><span>{{username}}</span></strong></br>
ngBind Username : <strong><span ng-bind="username"></span></strong></br>
</body>
</html>
Usage of ng-cloak directive
When we run the code which has expressions we will be seeing the expresssion {{}} for a sec and then it disappears. In order to overcome this issue you can use the ngCloak directive to it. The ng-cloak directive actually prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. Hence the above code can be re-written like below
<!DOCTYPE html>
<html ng-app="bindApp">
<head>
<meta charset="ISO-8859-1">
<title>double curly ngbind difference</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
</script>
<script>
angular
.module("bindApp", [])
.controller("bindCtrl", function($scope)
{
$scope.username = "JavaInterviewPoint";
});
</script>
</head>
<body ng-controller="bindCtrl">
Double Curly Username : <strong><span ng-cloak>{{username}}</span></strong></br>
ngBind Username : <strong><span ng-bind="username"></span></strong></br>
</body>
</html>
ngBindHtml directive
There are times where you may need to bind a string of raw HTML, then we can use the ngBindHtml directive. Usage is similar to that of ngBind directive, however there is a difference between them ngBindHtml directive does not escape the content which will let the browser to interpret the raw HTML code.
<!DOCTYPE html>
<html ng-app="bindApp">
<head>
<meta charset="ISO-8859-1">
<title>ngBind Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.js"></script>
<script>
var myapp = angular.module("bindApp",['ngSanitize']);
myapp.controller("bindCtrl", function($scope)
{
$scope.message = "<h3> Welcome to JavaInterviewPoint !!!</h3>";
});
</script>
</head>
<body ng-controller="bindCtrl">
<strong><span ng-bind-html="message"></span></strong>
</body>
</html>
Output :
And not like <h3> Welcome to JavaInterviewPoint !!!</h3>, ng-bind-html will let the browser interpret the html.
Note: The ngBindHtml depends upon “angular-sanitize.js” we need to include that in our code and “ngSanitize” in our module dependency
ngBindTemplate directive
The ng-bind-template directive is used to bind multiple expressions to the view. Unlike ng-Bind, the ngBindTemplate can have multiple {{ }} expressions.
<!DOCTYPE html>
<html ng-app="bindTemplateApp">
<head>
<meta charset="ISO-8859-1">
<title>ngBindTemplate Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.js"></script>
<script>
var myapp = angular.module("bindTemplateApp",['ngSanitize']);
myapp.controller("bindTemplateCtrl", function($scope)
{
$scope.customer = { name: "JavaInterviewPoint", country: "India", phone: "1234567890" };
});
</script>
</head>
<body ng-controller="bindTemplateCtrl">
<span ng-bind-template="Customer Name : {{ customer.name}}
Customer Country : {{ customer.country }}
Customer Phone : {{ customer.phone }}">
</body>
</html>
Output :
Leave a Reply