AngularJS ng-bind-template Directive

AngularJS ng-non-bindable Directive

Last Updated : 08 Aug, 2022

The ng-non-bindable Directive in AngularJS is used to specify that the specific content of HTML should not be compiled i.e the contents should be ignored by AngularJS. It can be used when we want to display code snippets instead of compiled output.

Syntax:

<element ng-non-bindable> 
    Contents... 
</element>

Example 1: This example uses ng-non-bindable Directive to ignore expression.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-non-bindable Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="" style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-non-bindable Directive</h3>
    <div>
        The result of 
              <span ng-non-bindable 
                  style="background-color:green;
                         color:white">
                  {{5+5}}
              </span> is {{5+5}}
    </div>
</body>
</html>

Output:

Example 2: This example uses ng-non-bindable Directive to ignore expression.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-non-bindable Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-non-bindable Directive</h3>
    <div ng-controller="geek">
        Input 1:
            <input type="number" ng-model="val1" />
        <br><br>
        Input 2: 
            <input type="number" ng-model="val2" />
        <br><br>
            <input type="button" value="sum" ng-click="sum()" />
        <br><br>
        <div>Without Non-Bindable: {{result}}</div>
        <div ng-non-bindable>With Non-Bindable: {{result}}</div>
    </div>

    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.sum = function () {
                $scope.result = $scope.val1 + $scope.val2;
            }
        }]);
    </script>
</body>
</html>

Output:

AngularJS ng-bind-template Directive

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

AngularJS ng-bind Directive

The ng-bind Directive in AngularJS is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in the ng-bind directive. Syntax: <element ng

AngularJS ng-bind-html Directive

The ng-bind-html Directive in AngularJS is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression"

AngularJS ng-blur Directive

The ng-blur Directive in AngularJS is fired when an HTML element loses their focus. It doesn't override with element's original onblur event i.e. both the ng-blur expression and original onblur event will execute. Syntax: <element ng-blur="expression"> Contents... </element>Parameter: ex

AngularJS ng-open Directive

The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P

AngularJS ng-bind-template Directive

The ng-bind-template Directive in AngularJS is used to replace the content of an HTML element with the value of the given expression. It is used to bind more than one expression. It can have multiple {{ }} expressions. It is supported by all HTML elements. Syntax: The ng-bind-template Directive can

AngularJS ng-app Directive

The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc

AngularJS ng-dblclick Directive

The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be ov

AngularJS ng-change Directive

The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be present. It is triggered whenever there is any single change in the input. It ca

Built-in directives in Angular

DirectivesÂ are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (cus

AngularJS ng-show Directive

The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> C