How to allow html tags to be executed from an angular variable?

Asked

Viewed 981 times

3

I am consuming data from an angular api, the api is returning me the following value with HTML:

variavel = '<p>testo de retorno</p>';

When I do the view view type {{variable}} is interpreted all as string displaying HTML. I need to display only the text considering the HTML tags, that is, I cannot remove the HTML. You have to display only the text and interpret the HTML.

Does anyone know how I can do this using angular?

javascript angularjs
  • 1

    Have a look at ngBindHtml https://docs.angularjs.org/aping/directive/ngBindHtml. Angular treats HTML to prevent XSS attack.

  • thanks man. I’m checking it now

  • 1

    @Miguelbatist you might run into some errors (like $sce) when using ng-bind-html. This happens by the absence of the module ngSanitize. I answered another user with this problem here: http://answall.com/questions/132005/problema-no-angular-1-5-rodando-com-arquivos-minificados

  • I managed to solve here. I will post the answer and I really came across this error regarding $sce

  • @Celsomtrindade I managed to solve without ngSanitize. Only with the dependency of $sce.

2 answers

2


Use ngBindHtml, in the example below the contents of the variable $scope.myHtml will be injected into the <div>.

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-bind-html="myHtml"></div>
</div>

Controller

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myHtml = '<p>testo de retorno</p>';
});

If you need the practical example to clarify: https://jsfiddle.net/lucassilvax/du9ynoag/

1

How I am picking up the data via Ajax if I try to display the information directly from the ng-bind-html directive is reported error regarding $sce "Error: [$sce:unsafe] http://errors.angularjs.org/1.5.5/$sce/unsafe". So I was able to solve the problem as follows according to the reference: Problem at angular 1.5 running with minified files 

const angular = require('angular');
const ngRoute = require('angular-route');   

class ProdutoController{
        /* ngInject */
        constructor($scope,$routeParams, $sce){
          this.$scope = $scope;
          this.$sce = $sce;
          this.$routeParams = $routeParams;

        }

        $onInit() {
          this.produto = [];

        }

        $onInit() {
          this.produto = [];
          this.carregaProduto();

        }

        async carregaProduto() {
          const produto = await Promise.all([this.services.produto.get(this.$routeParams.id)]);
          this.$scope.descricao_produto = this.$sce.trustAsHtml(produto.descricao);

          this.$scope.$apply(() => {
            this.produto = produto;
          });


        }

    }

Resolution line: 

this.$scope.descricao_produto = this.$sce.trustAsHtml(produto.descricao);

HTML 

<div ng-bind-html="descricao_produto"></div>
  • 1

    the way you did it here solves, but remember that it was applied locally, that is, if you need another ajax that has text display in html (as a news portal), the ideal would be to use the ngSanitize module, not to need much manual work. But of course.. Each case is a case and depends on its need. Just one observation to be made. = D

  • I got it. I’m going to change and put the 'ngSanitize' module as dependency. I hadn’t assimilated this difference. vlw.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.