javascript - with - w3schools titles




Inserir HTML na visualização (12)

Apenas fiz isso usando ngBindHtml seguindo os documentos angulares (v1.4) ,

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

Certifique-se de incluir ngSanitize nas dependências do módulo. Então deve funcionar bem.

É possível criar um fragmento HTML em um controlador AngularJS e ter esse HTML mostrado na exibição?

Isso vem de um requisito para transformar um blob JSON inconsistente em uma lista aninhada de pares id : value . Portanto, o HTML é criado no controlador e agora estou procurando exibi-lo.

Eu criei uma propriedade de modelo, mas não é possível renderizar isso na exibição sem que seja apenas imprimir o HTML.

Atualizar

Parece que o problema surge da renderização angular do HTML criado como uma string entre aspas. Will tentará encontrar uma maneira de contornar isso.

Exemplo de controlador:

var SomeController = function () {

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

Exemplo de vista:

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

Dá:

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

Apenas uso simples [innerHTML] , como abaixo:

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

Antes você precisava usar o ng-bind-html ...


Como de Angular 4, esta é a maneira que agora funciona:

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

Retirado desta questão here.


Descobri que usar o ng-sanitize não me permitia adicionar ng-click no html.

Para resolver isso, adicionei uma diretiva. Como isso:

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);
  }
}
});

E este é o HTML:

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

Boa sorte.


Exemplo de trabalho com pipe para exibir o html no modelo com Angular 4.

Tubo 1.Crated escape-html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

`2. Registrar pipe em app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]
  1. Use em seu modelo

        <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

  2. getDivHtml() { //can return html as per requirement}

    Por favor, adicione a implementação apropriada para getDivHtml no arquivo component.ts associado.


Felizmente, você não precisa de nenhum filtro sofisticado ou métodos inseguros para evitar essa mensagem de erro. Essa é a implementação completa para gerar corretamente a marcação HTML em uma visualização da maneira desejada e segura.

O módulo sanitize deve ser incluído após 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>

Então, o módulo deve ser carregado:

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

Isso permitirá que você inclua marcação em uma string de um controlador, diretiva, etc:

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

Finalmente, em um modelo, ele deve ser produzido da seguinte forma:

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

Que produzirá a saída esperada: 42 é a resposta .


Outra solução, muito semelhante à do blrbr, exceto pelo uso de um atributo com escopo definido é:

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);
      }
    };
  }]);

E depois

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

Note que você pode substituir element.append() por element.replaceWith()


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

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

Neste ponto, você attempting to use an unsafe value in a safe context erro de attempting to use an unsafe value in a safe context portanto, é necessário usar ngSanitize ou $sce ngSanitize para resolver isso.

$ sce

Use $sce.trustAsHtml() no controlador para converter a string html.

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

ngSanitize

Existem 2 etapas:

  1. inclua o recurso angular-sanitize.min.js, ou seja:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. Em um arquivo js (controlador ou geralmente app.js), inclua ngSanitize, ou seja:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


Você também pode criar um filtro assim:

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

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

Então na visão

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

Nota : Este filtro confia em todo e qualquer html passado a ele e poderia apresentar uma vulnerabilidade de XSS se variáveis ​​com entrada do usuário forem passadas para ele.


Você também pode usar ng-include .

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

você pode usar "ng-show" para mostrar os dados desse modelo.


em html

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

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

OU

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

no controlador

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

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

funciona também com $scope.comment.msg = $sce.trustAsHtml(html);


Angular JS mostra HTML dentro da tag

A solução fornecida no link acima funcionou para mim, nenhuma das opções deste thread fez. Para quem procura a mesma coisa com o AngularJS versão 1.2.9

Aqui está uma cópia:

Ok achei solução para isso:

JS:

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

HTML:

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

EDITAR:

Aqui está a configuração:

Arquivo 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>'; 

    }]);

Arquivo HTML:

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




html-sanitizing