Introduction
In my previous articles I told you about:
This article explains the ng-bind-template directive of AngularJS.
There is a problem with ng-bind; you can only bind a single {{}} expression with it, now the question is what to do when we want to bind multiple expressions with it?
The solution is ng-bind-template, it can bind more than one {{}} expression, so it can show more than a single value that was declared in the Script function.
Now I am showing you an example of how to use this directive in your application.
Step 1
First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".
For this you can go to the AngularJS official Site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now I will work on the ViewModel or JavaScript part of this application.
Write this code in the Head Section of your application:
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.firstName = 'Anubhav';
$scope.lastName = 'Chaudhary';
}
</script>
</head>
Here I have declared two initial values; the first is the firstName and the second is the secondName. These values will be shown by default whenever the user runs the application.
Our work on the ViewModel is complete, we now just need to work on the View part or design part of this application.
Step 3
Write this code in the Body tag:
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<label>First Name: </label><input type="text" ng-model="firstName" />
<br />
<label>Last Name: </label><input type="text" ng-model="lastName" />
<br />
<br />
<label ng-bind-template="Hello! {{firstName}} {{lastName}}"></label>
</div>
</form>
</body>
Here the Controller Name is the Function name that was declared in the Step 2, this controller name is provided in the Div.
Then both of the initial values are bound to two different Textboxes using ng-model.
Towards the end you can see that both the initial values are bound together to the same Label using the ng-bind-template.
Now our application is ready for execution.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.firstName = 'Anubhav';
$scope.lastName = 'Chaudhary';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<label>First Name: </label><input type="text" ng-model="firstName" />
<br />
<label>Last Name: </label><input type="text" ng-model="lastName" />
<br />
<br />
<label ng-bind-template="Hello! {{firstName}} {{lastName}}"></label>
</div>
</form>
</body>
</html>
Output
On running the application you will get an output like this:
![ng-bind-template using angularjs]()
Here you can see that the first and second TextBoxes are showing their initial values that were declared in the Script Tag and both of the values are shown in the Label as well.
Now when I make changes in the TextBox then the result can instantly be seen in the Label present at the end as well.
![ng-bind-template using angularjs]()