ng-non-bindable Directive of AngularJS

In my previous articles I have described:

Now in this article I will describe the ng-non-bindable directive.

Introduction

The ng-non-bindable Directive does not compile AngularJS code, or this directive unbinds the current DOM element. Sometimes it is useful when we want to show the binding elements of the directive.

As we know, if we write {{8 +10}} in AngularJS then the result/output will be 18. Suppose however that you want to show the result/output of this ( {{8 + 10}} ) then we need to use the ng-non-bindable directive so our output will be like this {{8 + 10}}.

How to use the ng-non-bindable Directive

You can use it as an attribute:

<Tag ng-non-bindable>
...
</Tag>

You can use it as a class:

<Tag class="ng-non-bindable">
...
</Tag>

Now I will explain use of ng-non-bindable (step-by-step) with the following.

Step1: First of all you need to add an external "angular.min.js" file to your application, To add this file to your application you need to download the "angular.min.js" file from the official website of AngularJS (link is given as follows): AngularJS Official Wbsite.

angular min js file

Step 2: Now in the next step I am creating two input Text-Boxes inside the body tag and binding it with ng-model as in the following:

body tag with Text-Boxes

Step 3: In the next step I am showing you how text is bound or how text is unbound. For this I am taking two divisions.

In the first division, Text is bound from both of the textboxes that you have created in the code above, and

in the second division I am writing same code, but in the division section I am using the ng-non-bindable directive so the text of the textboxes will never be bound with this division. See the following code.

Complete Code