Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

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.

share|improve this question
    
Have you tried to use ng-bind-html? – developer033 Jul 3 at 16:39
    
Yes, but shows basically the same thing, :C – Lucas S. Müller Jul 3 at 16:44
    
your problem is similar to this stackoverflow.com/questions/1248849/… – Prianca Jul 3 at 17:10
    
I did that link but the content aren't showed. – Lucas S. Müller Jul 3 at 17:20
up vote 2 down vote accepted

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>

share|improve this answer
    
Hello again. I did it today but it's showing the html content as a raw text. – Lucas S. Müller Jul 9 at 19:01
    
Hello, did you inject the ngSanitize? – developer033 Jul 9 at 21:10
    
Yes, i did inject. – Lucas S. Müller Jul 9 at 21:17
    
Well, strange.. can you make an edit in your post, posting how is your JS/HTML file (just the relevant code)? – developer033 Jul 9 at 21:26
    
Hello, my post was changed. Please, note the update. – Lucas S. Müller Jul 9 at 21:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.