注入json使用角度與工作html標籤

我需要你的幫助！我正在嘗試使用角度導入json文件。唯一的問題是，json文件是從其他網站導入的，html標籤顯示爲普通文本。這裏是我的問題，有沒有機會使這些標籤正常的HTML不是一個可見的文本？注入json使用角度與工作html標籤

HTML：

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
     <script src="maincontroller.js" type="text/javascript"></script> 
    </head> 
    <body bgcolor="lightblue"> 
     <div ng-app="mainApp" ng-controller="mainController"> 
      <div id="content" style="width: 500px; height: 500px; background-color: green; "> 
       <div ng-repeat="content in contents"> 
        <h2>{{content.title}}</h2> 
        <p>{{content.date}}</p> 
        <p>{{content.info}}</p> 
        <p>{{content.content}}</p> 
        <p>{{content.url}}</p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

maincontroller.js

var myapp=angular.module('mainApp',['ngSanitize']); 
myapp.controller('mainController',function($scope,$http){ 
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){ 
     $scope.contents = response.data.posts; 
     alert("success"); 
     console.log(response) 
    }, function(error){ 
     $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
     alert("error"); 
     console.log(response) 
    }) 
});

來源

2017-01-12 Lapsio

無法從您的描述中理解，您到底想要什麼。一些例子會很好。 –

嘗試這種解決方案之前，試試這個

https://plnkr.co/edit/JcW2fxcISsjYKpXGBBkp?p=preview

進樣ngSanitize：

你maincontroller.js文件

我已經加入$sce.trustAsHtml這樣的HTML文件可以知道內容有html標籤

var myapp=angular.module('mainApp',['ngSanitize']); 
    myapp.controller('mainController',function($scope,$http, $sce){ 
     $http.get('http://localhost/wordpress/?json=get_recent_posts').then(function(response, date){ 
      $scope.contents = response.data.posts; 
      $scope.info = $sce.trustAsHtml(contents.info); 
      alert("success"); 
      console.log(response); 
     }, function(error){ 
      $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
      alert("error"); 
      console.log(response); 
     }) 
    });

而且你的index.html

添加angular-sanitize.js文件，如果你還沒有加入。並在您的html標記中使用ng-bind-html。

<!doctype html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.js"></script> 
    <script src="mainController.js" type="text/javascript"></script> 
    </head> 
    <body bgcolor="lightblue"> 
     <div ng-app="mainApp" ng-controller="mainController"> 
      <div id="content" style="width: 500px; height: 500px; background-color: green; "> 
       <div ng-repeat="content in contents"> 
        <h2 ng-bind-html="content.title">{{content.title}}</h2> 
        <p>{{content.date}}</p> 
        <p>{{content.info}}</p> 
        <p ng-bind-html="content.content">{{content.content}}</p> 
        <p>{{content.url}}</p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-01-12 10:57:09

超級！它工作真棒！非常感謝你！ – Lapsio

很高興幫助:) –

而不是使用綁定快遞{{}}使用ng-bind-html-unsafe，它將使HTML標籤以及

例如

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    
 
    $scope.text = "<strong>this is html</strong>"; 
 
});

<body ng-controller="MainCtrl"> 
 
    Hello {{name}}! 
 
    <br/> 
 
    <ul> 
 
    <li>{{text}}</li> 
 
    <li ng-bind-html-unsafe="text"></li> 
 
    </ul> 
 
</body>

輸出會像

Hello World! 
<strong>this is html</strong> 
this is html

來源

2017-01-12 09:38:59 ricky

感謝您的幫助！ :) – Lapsio

如果我已深知，你必須使用這樣的事情在你的JavaScript：

myapp.controller('mainController',function($scope,$http, $sce){ 
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){ 
     $scope.contents = response.data.posts; 
     $scope.title = $sce.trustAsHtml(contents.title); 
     alert("success"); 
     console.log(response) 
    }, function(error){ 
     $scope.title = $sce.trustAsHtml("<h4> Error </h4>"); 
     $scope.date = $sce.trustAsHtml("<p> JSON invalid  </p>"); 
     alert("error"); 
     console.log(response) 
    }) 
});

，這在你的HTML：

<p ng-bind-html="title" class="htmlComment">

來源

2017-01-12 09:39:00 Francesca

是的，感謝您的幫助和快速回答:) – Lapsio

您可以使用ngBindHtml。編輯像下面

<span ng-bind-html="content.title">{{content.title}}</span>

來源

2017-01-12 09:39:41 digit

之前，它累了，但仍然有一些錯誤，但謝謝你的幫助:)） – Lapsio

代碼中使用ngBindHtml

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

<div ng-bind-html="scopeVariable"></div>

來源

2017-01-12 09:53:16 Sharmila

ngSanitize幫助了我很多，謝謝！ – Lapsio

歡迎Lapiso :) – Sharmila

注入json使用角度與工作html標籤

回答

相關問題