使用AngularJS的Json中的HTML [英] HTML in Json with AngularJS

问题描述

我正在使用Ionic构建一个使用AngularJS的应用程序. 因此，使用链接 http://lucassmuller.com/work/projetoblog/上的API api.php?action = posts 我想在我的应用程序页面中显示帖子的内容("conteudo")，但请像下面的示例所示:

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

输出:

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>

问题:它将HTML显示为原始/纯文本.

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

推荐答案

以下是可运行的代码段:

Here's is a snippet working:

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

app.controller('mainCtrl', function($scope) {
  $scope.test = replace_chars('<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...');

  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>

这篇关于使用AngularJS的Json中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！