La directiva ng-non-bindable en AngularJS se usa para especificar que el contenido específico de HTML no debe compilarse, es decir, AngularJS debe ignorar el contenido. Se puede usar cuando queremos mostrar fragmentos de código en lugar de una salida compilada.
Sintaxis:
<element ng-non-bindable> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-non-bindable para ignorar la expresión.
<!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>
<h2>ng-non-bindable Directive</h2>
<div>
The result of <span style="background-color:green;color:white"
ng-non-bindable>{{5+5}}</span> is = {{5+5}}
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza la directiva ng-non-bindable para ignorar la expresión.
<!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>
<h2>ng-non-bindable Directive</h2>
<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>
Salida:
Antes de hacer clic: 
Después de hacer clic:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA