0

i'm building a App with Ionic that uses AngularJS. So, with the API on link http://lucassmuller.com/work/projetoblog/api.php?action=posts I want to show the content ('conteudo') of the post in a page of my App but show that like this example:

<p><strong>Você tem um site e deseja um certificado SSL gratuitamente?<\/strong><\/p>\r\n\r\n<p>Se a resposta é sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let’s Encrypt, que é uma nova “Autoridade de Certificação” que é grátis, automatizada e aberta para todos.<\/p>\r\n\r\n<p>O nome dessa ferramenta é “<strong>SSL For Free<\/strong>” ou, em português, SSL gratuito. Este novo serviço é 100% grátis, e confiado e aceito pela maioria dos navegadores.<\/p>\r\n\r\n<p>Para começar, basta acessar o site da ferramenta <a href="https:\/\/www.sslforfree.com" target="_blank">clicando aqui<\/a> e após o acesso, digitar o domínio do seu site no campo que diz...

And the output:

Você tem um site e deseja um certificado SSL gratuitamente? Se a resposta é sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let’s Encrypt, que é uma nova “Autoridade de Certificação” que é grátis, automatizada e aberta para todos. O nome dessa ferramenta é “SSL For Free” ou, em português, SSL gratuito. Este novo serviço é 100%...

Update: my actual code after changes

controllers.js:

angular.module('starter.controllers', [])

.controller('PostCtrl', function($scope, $filter, API, $http, $stateParams, $sce) {

    var postId = $stateParams.postId;

    function replace_chars(input) {
        return input.replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&amp;/g, '&');
      }

    function htmlDecode(input){
      var e = document.createElement('div');
      e.innerHTML = input;
      return e.childNodes[0].nodeValue;
    }

    API.posts_all().then(function(response){
        var posts=response.data;
        for (var i = 0; i < posts.length; i++) {
          if (posts[i].id == parseInt(postId)) {
            $scope.post = posts[i];
            $scope.post.conteudof = replace_chars(posts[i].conteudo);
          }
        }
        console.log('post get ok');
    });

    $scope.doRefresh = function() {

        API.posts_all().then(function(response){
            var posts=response.data;
            for (var i = 0; i < posts.length; i++) {
              if (posts[i].id == parseInt(postId)) {
                $scope.post = posts[i];
                $scope.post.conteudof = replace_chars(posts[i].conteudo);
              }
            }
            console.log('post get ok');
        })

     .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };

})

tab-post.html:

<ion-view view-title="{{post.titulo}}">
  <ion-content>
    <ion-refresher
      pulling-text="Puxe para atualizar..."
      on-refresh="doRefresh()">
    </ion-refresher>
    <div class="list card">

      <div class="item item-avatar">
        <img src="{{post.gravatarautor}}">
        <h2>{{post.nomeautor}}</h2>
        <p>Postado em {{post.data * 1000 | date:'dd/MM/yyyy'}}</p>
      </div>

      <div class="item item-body">
        <div ng-bind-html="post.conteudof"></div>
        <!--<p>
          <a href="#" class="subdued">1 Like</a>
          <a href="#" class="subdued">5 Comments</a>
        </p>-->
      </div>

    </div>
  </ion-content>
</ion-view>

Problem: it's showing HTML as a raw/plain text.

4
  • Have you tried to use ng-bind-html? Commented Jul 3, 2016 at 16:39
  • Yes, but shows basically the same thing, :C Commented Jul 3, 2016 at 16:44
  • your problem is similar to this stackoverflow.com/questions/1248849/… Commented Jul 3, 2016 at 17:10
  • I did that link but the content aren't showed. Commented Jul 3, 2016 at 17:20

1 Answer 1

2

Here's is a snippet working:

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

app.controller('mainCtrl', function($scope) {
  $scope.test = replace_chars('&lt;p&gt;&lt;strong&gt;Voc&amp;ecirc; tem&amp;nbsp;um site e deseja um certificado SSL gratuitamente?&lt;\/strong&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Se a resposta &amp;eacute; sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let&amp;rsquo;s Encrypt, que &amp;eacute; uma nova&amp;nbsp;&amp;ldquo;Autoridade de Certifica&amp;ccedil;&amp;atilde;o&amp;rdquo; que &amp;eacute; gr&amp;aacute;tis, automatizada e aberta para todos.&lt;\/p&gt;\r\n\r\n&lt;p&gt;O nome dessa ferramenta &amp;eacute; &amp;ldquo;&lt;strong&gt;SSL For Free&lt;\/strong&gt;&amp;rdquo; ou, em portugu&amp;ecirc;s, SSL gratuito. Este novo servi&amp;ccedil;o &amp;eacute; 100% gr&amp;aacute;tis, e confiado e aceito pela maioria dos navegadores.&lt;\/p&gt;\r\n\r\n&lt;p&gt;Para come&amp;ccedil;ar, basta acessar o site da ferramenta &lt;a href=&quot;https:\/\/www.sslforfree.com&quot; target=&quot;_blank&quot;&gt;clicando aqui&lt;\/a&gt;&amp;nbsp;e ap&amp;oacute;s o acesso, digitar o dom&amp;iacute;nio do seu site no campo que diz...');

  function replace_chars(input) {
    return input.replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&amp;/g, '&');
  }
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js"></script>
</head>
<body ng-controller="mainCtrl">
  <div>
    <span ng-bind-html="test"></span>
  </div>
</body>
</html>

Sign up to request clarification or add additional context in comments.

8 Comments

Hello again. I did it today but it's showing the html content as a raw text.
Hello, did you inject the ngSanitize?
Yes, i did inject.
Well, strange.. can you make an edit in your post, posting how is your JS/HTML file (just the relevant code)?
Hello, my post was changed. Please, note the update.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.