Description :
Ng-non-Bindable directive when you do not want to compile or bind application data to the html element.It display {{1+2}} as it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
</div>
</body>
</html>
Description :
In this we can display sum on click of add button because it can call Add() function which add values of two textbox.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
Value 1 <input type="number" ng-model="val1" />
Value 2 <input type="number" ng-model="val2" />
<input type="button" value="Add" ng-click="Add()" />
<div>Normal: {{sum}}</div>
<div ng-non-bindable>Non-Bindable: {{sum}}</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.Add = function () {
$scope.sum = $scope.val1 + $scope.val2;
}
}]);
</script>
</body>
</html>
Description :
In this example we can display value of Arrs object using ng-repeat directive but in other case we display {{Arr.val}} as it because ng-non-bindable directive will not compile the data.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<span ng-repeat="Arr in Arrs">
Normal: {{Arr.val}}<br />
<i ng-non-bindable>Non-Bindable: {{Arr.val}}</i><br />
</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.Arrs = [{ val: 1+2 }, { val: 5*3 }, { val: 20/5 }, { val: 10-4 }];
}]);
</script>
</body>
</html>
Description :
In this textbox value is bind to myName variable.In first case textbox value is display but in second case it will display {{myName}} because ng-non-bindable does not bind application data to html element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
Name: <input type="text" ng-model="myName">
<p>My name is {{ myName }}</p>
<p ng-non-bindable>My name is {{ myName }}</p>
</div>
</body>
</html>
Description :
First expression display the result "10" but second and third expression display as it because ng-non-bindable directive does not compile or bind data to the html element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<p> {{'Expression: 5+5 = ' + (5+5)}}</p>
<p ng-non-bindable>{{ 'Non-Bindable 2+2 = ' + (2+2)}} </p>
<p class="ng-non-bindable"> {{ 'Non-Bindable with class 2+2 = ' + (2+2)}} </p>
</div>
</body>
</html>
Description :
In first div Your Name is: {{Name}} display as it because ng-non-bindable does not compile the data.In second div it compile the {{Name}} which is intializewith FirstName and SecondName.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div ng-init="Name='FirstName, LastName'" ng-non-bindable>
Your Name is: {{Name}}
</div>
<div ng-init="Name='FirstName, LastName'">
Your Name is: {{Name}}
</div>
</div>
</body>
</html>
Description :
Ng-Non-Bindable-7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<br />
FIRST REPEAT<div ng-repeat="lang in languages"><span ng-bind="lang"></span></div><br /><br />
SECOND REPEAT<div ng-repeat="lang in languages"><span ng-non-bindable="lang"></span></div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.languages = ["JavaScript", "Jquery", "AngularJS", "Php", "DotNet", "Java"];
}]);
</script>
</body>
</html>
Description :
Ng-Non-Bindable-8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container">
<div class="row well">
<div class="col-md-12 text-center">
<h4>Use of ng-non-bindable</h4>
<div style="height:50px;background-color:moccasin;padding:10px">
Example 1 : When we evaluate <span style="background-color:red;color:white">{{5+5}}</span> expression the answer is = {{5+5}} <span class="glyphicon glyphicon-remove"></span>
</div>
<div style="height:50px;background-color:tan;padding:10px">
Example 2 : When we evaluate <span style="background-color:green;color:white" ng-non-bindable>{{5+5}}</span> expression the answer is = {{5+5}} <span class="glyphicon glyphicon-ok"></span>
</div>
</div>
</div>
</div>
</body>
</html>