¿Cómo insertar HTML a la vista desde el controlador AngularJS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *