javascript - img - w3school html tag




Insertar HTML en la vista (12)

¿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>

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

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

Tomado de esta pregunta here.


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 .


Aquí hay una simple (e insegura) directiva de bind-as-html , sin la necesidad de ngSanitize :

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

Tenga en cuenta que esto se abrirá por problemas de seguridad, si se vincula contenido no confiable.

Utilizar como tal:

<div bind-as-html="someHtmlInScope"></div>

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.


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


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

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


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'])


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.


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.


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>

Angular JS muestra HTML dentro de la etiqueta

La solución provista en el enlace anterior funcionó para mí, ninguna de las opciones en este hilo funcionó. Para quienes buscan lo mismo con AngularJS versión 1.2.9.

Aquí hay una copia:

Ok encontré solución para esto:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

EDITAR:

Aquí está la configuración:

Archivo JS:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

Archivo HTML:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

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 .







html-sanitizing