How to increase text font with Ngsatinize?

Asked

Viewed 432 times

1

I am not managing to increase or decrease the source of my news, which is with the attribute Ngsatinize, does anyone know how to modify it ? or another way to satinize my html ?

  • 3

    Please add a minimal, complete and verifiable example of your code for further clarification.

  • Has any response helped solve the problem and can address similar questions from other users? If so, make sure to mark the answer as accepted. To do this just click on the left side of it (below the indicator of up and down votes).

1 answer

1

From what I understand of your question you must be having difficulty inserting style inline on the tag inside the ng-bind. For it to work properly you must use the provider $sce and function trustAsHtml. Below is an example:

(function() {
  'use strict';

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

  angular
    .module('appExemploSanitize')
    .controller('NoticiaController', NoticiaController);

  NoticiaController.$inject = ['$sce'];

  function NoticiaController($sce) {
    var noticia = this;
    var texto;

    noticia.buscarNoticia = buscarNoticia;
    noticia.aumentarFonte = aumentarFonte;
    noticia.redefinir = redefinir;
    noticia.diminuirFonte = diminuirFonte;

    iniciar();

    function iniciar() {
      noticia.tamanho = 100;
      texto = '<div>O Facebook está tomando uma série de medidas para eliminar boatos e outros tipos de mentiras de seus feeds, disse na sexta-feira (18) o presidente da empresa, Mark Zuckerberg. A rede social enfrenta críticas por não ter evitado uma enxurrada de notícias falsas de serem compartilhadas na rede social antes da eleição norte-americana.</div>';
    }

    function buscarNoticia() {
      return $sce.trustAsHtml('<div style="font-size: ' + noticia.tamanho + '%"' + texto + '</div>');
    }

    function aumentarFonte(quantidade) {
      noticia.tamanho = noticia.tamanho + quantidade;
    }

    function redefinir(novaFonte) {
      noticia.tamanho = novaFonte;
    }

    function diminuirFonte(quantidade) {
      noticia.tamanho = noticia.tamanho - quantidade;
    }
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.js"></script>

<div ng-app="appExemploSanitize">
  <div ng-controller="NoticiaController as noticia">
    <div ng-bind-html="noticia.buscarNoticia()">
    </div>
    <br>
    Tamanho: {{noticia.tamanho}}%
    <button ng-click="noticia.aumentarFonte(10)">+</button>
    <button ng-click="noticia.redefinir(100)" ng-disabled="noticia.tamanho === 100">100%</button>
    <button ng-click="noticia.diminuirFonte(10)">-</button>
  </div>
</div>

Browser other questions tagged

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