AngularJS ngNonBindable Directive



  • The ng-nonbindable directive in AngularJS used to specifies the content of this HTML element should not be compiled by AngularJS or it specifies that no data binding in the element.
  • It is supported by all HTML elements.
  • The ng-nonbindable directive does not have any parameter values.

Syntax for ng-nonbindable Directive in AngularJS:

<element ng-nonbindable></element>

Sample coding for ng-non-bindable Directive in AngularJS

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="" ng-init="text='Welcome to wikitechy'">
            <h3>ng-nonbindable Directive in AngularJS Tutorial</h3>
            <p> {{text}}</p> 
            <p ng-non-bindable> {{text}}</p> 
            <p> AngularJS compile this Expression: {{20+50 }}</p> 
            <p ng-non-bindable> AngularJS Cannot compile this Expression: 
            {{ 20+50 }}</p>
        </div>
    </body>
</html>

ng-non-bindable Directive using in AngularJS:

<p>AngularJS compile this Expression: {{20+50 }}</p> 
<p ng-non-bindable> AngularJS Cannot compile this Expression: {{ 20+50 }}</p> 
  • The ng-non-bindable directive does not compile the AngularJS code.

Code Explanation for ng-non-bindable Directive in AngularJS:

Code Explanation for AngularJS ngNonBindable Directive

  1. The ng-app specifies the root element (<div>) to define AngularJS application.
  2. The ng-init is used to initialize the values for an application. (here the value Welcome to Wikitechy is mentioned for “text”)
  3. The expression text is executed and the output will be updated in <p> tag.
  4. The ng-non-bindable directive does not the compile the expression in AngularJS. The expression text does not execute (here the expression text is mentioned for ng-non-bindable)
  5. The expression 20+50 is executed and the output will be updated in <p> tag.
  6. The expression 20+50 is not executed (here the expression 20+50 is mentioned for ng-non-bindable directive)

Sample Output for ng-non-bindable Directive in AngularJS:

Sample Output for AngularJS ngNonBindable Directive

  1. The content welcome to wikitechy is displayed in the output.
  2. The output shows the text (welcome to wikitechy) is not executed.
  3. The output displays the addition of two numbers is 70.
  4. The addition of two numbers {{20+50}} does not executed is displayed in the output.

Related Searches to angularjs ngMaxlength directive