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,
<
script
src
=
"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