javascript title - Insertar HTML en la vista




attribute img (15)

Afortunadamente, no necesita filtros sofisticados ni métodos inseguros para evitar ese mensaje de error. Esta es la implementación completa para generar correctamente el formato HTML en una vista de la forma deseada y segura.

El módulo de desinfección debe incluirse después de Angular:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Entonces, el módulo debe ser cargado:

angular.module('app', [
  'ngSanitize'
]);

Esto le permitirá incluir el marcado en una cadena desde un controlador, directiva, etc.:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Finalmente, en una plantilla, se debe mostrar de la siguiente manera:

<p ng-bind-html="message"></p>

Que producirá el resultado esperado: 42 es la respuesta .

¿Es posible crear un fragmento HTML en un controlador AngularJS y tener este HTML mostrado en la vista?

Esto proviene de un requisito para convertir un blob JSON incoherente en una lista anidada de pares id : value . Por lo tanto, el HTML se crea en el controlador y ahora estoy buscando mostrarlo.

He creado una propiedad de modelo, pero no puedo mostrar esto en la vista sin que solo se imprima el HTML.

Actualizar

Parece que el problema surge de la representación angular del HTML creado como una cadena entre comillas. Intentaré encontrar una manera de evitar esto.

Ejemplo de controlador:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Vista de ejemplo:

<div ng:bind="customHtml"></div>

Da :

<div>
    "<ul><li>render me please</li></ul>"
</div>

He intentado hoy, la única manera que encontré fue esta

<div ng-bind-html-unsafe="expression"></div>


A partir de Angular 4, esta es la forma en que ahora funciona:

<div [innerHTML]="htmlString">
</div>

Tomado de esta pregunta here.


Utilizar

<div ng-bind-html="customHtml"></div>

y

angular.module('MyApp', ['ngSanitize']);

Para eso, necesita incluir angular-sanitize.js , por ejemplo en su archivo html con

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

en html

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

O

<div ng-bind-html="myCtrl.comment.msg"></div

en el controlador

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

también funciona con $scope.comment.msg = $sce.trustAsHtml(html);


Simplemente hice esto usando ngBindHtml siguiendo los documentos angulares (v1.4) ,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Asegúrese de incluir ngSanitize en las dependencias del módulo. Entonces debería funcionar bien.


Aquí está la solución hacer un filtro como este

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

y aplique esto como un filtro al ng-bind-html como

<div ng-bind-html="code | trusted">

y gracias a Ruben Decrop


También puedes usar ng-include .

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

puede usar "ng-show" para mostrar ocultar los datos de esta plantilla.


Descubrí que el uso de ng-sanitize no me permitía agregar ng-click en el html.

Para resolver esto agregué una directiva. Me gusta esto:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

Y este es el HTML:

<htmldiv content="theContent"></htmldiv>

Buena suerte.


También puedes crear un filtro así:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Luego en la vista

<div ng-bind-html="trusted_html_variable | trust"></div>

Nota : este filtro confía en todos y cada uno de los html pasados ​​a él, y podría presentar una vulnerabilidad XSS si se le pasan variables con la entrada del usuario.


Hay una solución más para este problema utilizando la creación de nuevos atributos o directivas en angular.

producto-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

o

<div  product-specs>//it will add product-specs.html file 

o

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive


Para Angular 1.x, use ng-bind-html en el HTML:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

En este punto, obtendría un attempting to use an unsafe value in a safe context error de attempting to use an unsafe value in a safe context por lo que necesita usar ngSanitize o $sce para resolverlo.

$ sce

Use $sce.trustAsHtml() en el controlador para convertir la cadena html.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

Hay 2 pasos:

  1. incluya el recurso angular-sanitize.min.js, es decir:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. En un archivo js (controlador o normalmente app.js), incluya ngSanitize, es decir:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


Otra solución, muy similar a la de blrbr, excepto que usa un atributo de ámbito es:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

Y entonces

<render-html html="htmlAsString"></render-html>

Tenga en cuenta que puede reemplazar element.append() con element.replaceWith()


ng-bind-html-unsafe ya no funciona.

Este es el camino más corto:

Crear un filtro:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

Y en su opinión:

<div ng-bind-html="customHtml | unsafe"></div>

PS Este método no requiere que incluyas el módulo ngSanitize .


Justo antes de la etiqueta de cierre del cuerpo, como se indica en

http://developer.yahoo.com/performance/rules.html#js_bottom

Poner scripts en la parte inferior

El problema causado por los scripts es que bloquean las descargas paralelas. La especificación HTTP / 1.1 sugiere que los navegadores no descarguen más de dos componentes en paralelo por nombre de host. Si sirve sus imágenes desde varios nombres de host, puede hacer que más de dos descargas se realicen en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en nombres de host diferentes.







javascript angularjs escaping html-sanitizing