La directiva ng-bind-html es una forma segura de vincular contenido a un elemento HTML. Entonces, para insertar HTML a la vista, usamos la directiva respectiva.
Mientras usa AngularJS, escriba HTML en nuestra aplicación correspondiente, debemos verificar el HTML en busca de código peligroso o propenso a errores. Al incluir el módulo “angular-sanitize.js” en la aplicación, podemos hacerlo ejecutando el código HTML a través de la función ngSanitize .
Sintaxis:
<element ng-bind-html="expression"></element>
ngSanitize:
Consta de 2 pasos:
- Incluya el recurso angular-sanitize.min.js,
<scriptsrc="lib/angular/angular-sanitize.min.js"></script> - En un archivo js (controlador o generalmente app.js), debemos incluir ngSanitize,
angular.module('myApp', ['myApp.filters', 'myApp.services','myApp.directives', 'ngSanitize'])
Parámetros:
- Expresiones: especifica una expresión o el valor para la evaluación.
Ejemplo 1:
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js">
</script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<p ng-bind-html="myText">
</p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "GeeksForGeeks: <h1>Hello!</h1>";
});
</script>
<p><b>Note:</b> This example includes the "angular-sanitize.js",
which has functions for removing potentially
dangerous tokens from the HTML.</p>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ng-bind-html Directive</title>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
</script>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
</script>
<style>
.green {
color: green;
font-size: 20px;
}
</style>
</head>
<body ng-controller="geek" style="text-align:center">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2 style="">ng-bind-html Directive</h2>
<p ng-bind-html="text"></p>
<script>
var myApp = angular.module("myApp", ['ngSanitize']);
myApp.controller("geek", ["$scope", function($scope) {
$scope.text =
"<span class='green'> GeeksforGeeks</span> is the"
+ " computer science portal for geeks.";
}]);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshid1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA