La directiva ng-bind-template en AngularJS se usa para reemplazar el contenido de un elemento HTML con el valor de la expresión dada. Se utiliza para enlazar más de una expresión. Puede tener varias expresiones {{ }} . Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-bind-template="expression"> Contents... <l;/element>
Ejemplo 1: este ejemplo utiliza la directiva ng-bind-template para mostrar el contenido de vinculación.
<!DOCTYPE html>
<html>
<head>
<title>
ng-bind-template Directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-bind-template Directive</h2>
<div ng-controller="geek">
Choose one:<br>
<label>Linear Search
<input type="radio" name="r1" ng-model="search"
value="Linear Search" />
</label><br>
<label>Binary Search
<input type="radio" name="r1" ng-model="search"
value="Binary Search" />
</label><br>
<span ng-bind-template="{{msg}} {{search}}"></span>
<br>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.msg="The better searching algorithm is: ";
$scope.search = ""
}]);
</script>
</body>
</html>
Salida:
Antes de seleccionar el botón de opción: 
Después de seleccionar el botón de opción:
Ejemplo 2: este ejemplo utiliza la directiva ng-bind-template para mostrar el contenido de vinculación.
<!DOCTYPE html>
<html>
<head>
<title>ng-bind-template Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<div ng-controller="geek">
<label>Football
<input min="0" type="number" ng-model="Football" />
</label>
<br><br>
Count of Footballs:
<span ng-bind-template="{{Football}}"></span><br>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.Football = "";
}]);
</script>
</body>
</html>
Salida:
Antes de ingresar el número: 
Después de ingresar el número:
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