2016-07-03 5 views
0

AngularJSを使用するIonicでAppを構築しています。AngularJSを使用したJsonのHTML

<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... 

そして出力:

私は私のアプリのページに投稿の内容(「conteudo」)を表示したいが、この例のようにあることを示すリンク http://lucassmuller.com/work/projetoblog/api.php?action=posts上のAPIを持つので 、
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%... 

更新:私の実際のコードは、後に変更

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

}) 

タブ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> 

問題:それは、プレーン/生テキストとしてHTMLを示しています。

+0

あなたは 'NG-バインドhtml'を使用しようとしたことがありますか? – developer033

+0

はい、基本的に同じことを示しています:C –

+0

あなたの問題はこれに似ていますhttp://stackoverflow.com/questions/1248849/converting-sanitised-html-back-to-displayable-html – Prianca

答えて

2

ここだが、スニペットの作業です:

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>

+0

こんにちは。私は今日それをしましたが、それは生のテキストとしてHTMLコンテンツを表示しています。 –

+0

こんにちは、あなたはngSanitizeを注入しましたか? – developer033

+0

はい、私は注射しました。 –

関連する問題