Injizieren von Json mit eckigen mit der Arbeit HTML-Tags

Ich brauche deine Hilfe! Ich versuche, json-Datei mit eckigen zu importieren. Das einzige Problem ist, dass die JSON-Datei von einer anderen Website importiert wird und die HTML-Tags als normaler Text angezeigt werden. Und hier ist meine Frage, gibt es eine Chance, diese Tags normal HTML nicht einen sichtbaren Text zu machen?Injizieren von Json mit eckigen mit der Arbeit HTML-Tags

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

Quelle

2017-01-12 Lapsio

nicht aus Ihrer Beschreibung zu verstehen, was genau Sie wollen. Ein Beispiel wäre gut. –

Versuchen Sie, diese Lösung:

Ihre maincontroller.js Datei

Ich habe $sce.trustAsHtml so html-Datei hinzugefügt, dass die Inhalte wissen können HTML-Tags

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

Und Ihre index.html

hinzufügen angular-sanitize.js Datei hat, wenn Sie noch nicht hinzugefügt haben. und verwenden Sie ng-bind-html in Ihrem HTML-Tag.

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

Quelle

2017-01-12 10:57:09

Super! Es funktioniert super! vielen Dank! – Lapsio

Froh, dass es geholfen hat :) –

Anstelle der Verwendung von Bindungs Express {{}} Verwendung ng-bind-html-unsafe Es wird HTML-Tag als auch

Beispiel

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>

machen

Out wird wie

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

Quelle

2017-01-12 09:38:59 ricky

Danke für Hilfe! :) – Lapsio

Wenn ich gut verstanden haben, müssen Sie so etwas wie dies in Ihrem Javascript verwenden:

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

und dies in Ihrem html:

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

Quelle

2017-01-12 09:39:00 Francesca

Yup, danke für Hilfe und schnelle Antwort :) – Lapsio

Sie können ngBindHtml verwenden. Bearbeiten Sie Ihren Code wie unten

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

Quelle

2017-01-12 09:39:41 digit

müde es vorher, aber immer noch einige Bugs, aber danke für die Hilfe trotzdem :)) – Lapsio

Versuchen Sie, diese

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

Inject ngSanitize vor ngBindHtml mit

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

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

Quelle

2017-01-12 09:53:16 Sharmila

ngSanitize hilft mir sehr, danke! – Lapsio

Willkommen Lapiso :) – Sharmila

Injizieren von Json mit eckigen mit der Arbeit HTML-Tags

Antwort

Verwandte Themen