Wie rendern Sie HTML mit anguarjs?

Question

Ich erstelle eine angularjs einzelne Seite Anwendung. Die Daten werden von einem Webservice unter json -format abgerufen.

Das Problem ist, dass einige Textelemente werden mit vorformatierte HTML-Tags

json Ausgang:

{ 
    "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>" 
} 

Nun, wie kann ich diesen Text anzuzeigen und den HTML-Code direkt zu übertragen, so dass nur "test" ist Dem Benutzer angezeigt und der Rest dient als Markup?

<h1>{{data.text}}</h1> 

Answer 1

Sie müssen ng-bind-html="data.text" zu Ihrem h1-Tag hinzufügen.

Ihre html würde wie folgt aussehen:

<h1 ng-bind-html="data.text"></h1> 

Dokumentation: ngBindHtml

Answer 2

Versuchen Sie, diese https://docs.angularjs.org/api/ng/directive/ngBind

<script> 
    angular.module('bindExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.name = 'Whirled'; 
    }]); 
</script> 
<div ng-controller="ExampleController"> 
    <label>Enter name: <input type="text" ng-model="name"></label><br> 
    Hello <span ng-bind="name"></span>! 
</div> 

Answer 3

Update2 zu verwenden: ist es Ihnen möglich, die HTML-Streifen?

angular.module('myApp.filters', []). 
    filter('htmlToPlaintext', function() { 
     return function(text) { 
     return String(text).replace(/<[^>]+>/gm, ''); 
     }; 
    } 
); 

Und Sie HTML:: Es könnte so geschehen

<div>{{myText | htmlToPlaintext}}</div> 

weitere Informationen siehe: angularjs to output plain text instead of html

Update: brauchen Sie wirklich die html von Ihrem json? Es ist besser, Ihr HTML in den Ansichten zu speichern und die Daten von Ihrem json zu erhalten. Schöne Trennung und sehr einfach zu bedienen.

Es ist möglich, aber nicht so einfach wie Nicht-HTML (große Sicherheit).

In Angular 1.3 müssen Sie wie folgt vor:

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

In Ihrem Controller hinzufügen:

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>'); 

Erläuterung: Sie sehen die $ sce:

$ sce ist ein Dienst, der AngularJS Strict Contextual Escaping-Dienste zur Verfügung stellt.

trustAs (Typ, Wert)

Delegierten $ sceDelegate.trustAs. Als solches wird ein Objekt zurückgegeben, das von angular für die Verwendung in bestimmten strikten kontextabhängigen Escape-Kontexten (wie ng-bind-html, ng-include, beliebige src-Attribut-Interpolation, beliebige dom-Ereignis-Bindungsattribut-Interpolation wie für onclick etc.) vertraut wird.) die den angegebenen Wert verwendet. Siehe * $ sce für das Aktivieren von strikt kontextabhängigem Escaping.

Lesen Sie mehr hier:

• https://docs.angularjs.org/api/ng/service/ $ sce
• AngularJS : Insert HTML into view