How to render html mit AngularJS Vorlagen

Dies ist meine Vorlage:

<div class="span12">
  <ng:view></ng:view>
</div>

- und das ist meine Ansicht-Vorlage:

<h1>{{stuff.title}}</h1>

{{stuff.content}}

Ich bin immer der content als html und ich will zeigen, dass in einer Ansicht, aber alles was ich erhalte ist reinen html-code. Wie kann ich machen, dass HTML?

Wo ist der HTML aus? Unter anderen Umständen, Sie wollen ngBindHtmlUnsafe, ngSanitize oder eine benutzerdefinierte Richtlinie.
Der html-Code aus meiner Datenbank
Der Inhalt ist absolut vertrauenswürdig?
können Sie bitte erklären, mehr Informationen zu trusted. ich meine, ich bin entring die Daten selbst, aber ich würde gerne wissen, was sind die worst-case-Szenarien
Zum Beispiel, wenn die HTML enthält ein script - tag die browser ausgeführt würde. Diese Art der "injection" - Angriff ist ein gemeinsamer Weg von schädlichen apps und stehlen Nutzer-Daten. AngularJS verfügt über ein separates Modul namens ngSanitize, die Sie verwenden können, um Streifen Sie den HTML-von Gefahr-tags; es hat auch eine Richtlinie mit dem Namen ngBindHtml, das funktioniert genau wie ngBindHtmlUnsafe, aber Streifen die gefährliche tags für Sie. Wenn der Inhalt liegt ganz bei Ihnen - und nicht von Nutzern oder Dritten - dann brauchst du es nicht.
Oh, und wenn Sie ziehen, Vorlagen von einem server ngInclude oder eine (einfache!) benutzerdefinierte Richtlinie wäre wahrscheinlich der bessere Weg zu gehen.
mögliche Duplikate von "HTML Einfügen" in die Ansicht mit AngularJS

InformationsquelleAutor user194932147 | 2013-04-02

angularjs javascript

97

Verwenden-
```
<span ng-bind-html="myContent"></span>
```
Müssen Sie mitteilen Winkel zu ihm nicht entrinnen.
- Es ist ein Tippfehler - er meinte <span ng-bind-html-unsafe="stuff.content"></span>.
- API hat sich geändert in AngularJS 1.2. stackoverflow.com/questions/18340872/...
- amccausl gerettet hat neue eckige Benutzer unzählige Stunden des Debuggens durch eckige "Hölle docs" ng-bind-html-unsafe ist veraltet und beziehen Sie bitte auf den link in den Kommentar oben zu lösen, die Antwort.
- Ich habe gerade eingefügt <span ng-bind-html="myHtmlFragment"></span> in meinem template und ohne sonst etwas zu tun es hat Super geklappt. Ich habe nicht zu injizieren, $sce. Hier ist die Doku: docs.angularjs.org/api/ng/directive/ngBindHtml
- ngSanitize -eine Sache, die fehlte mir bei der Verwendung der Antworten hier(Sie können aus den Winkel-docs auf ng-bind-html) ist, müssen Sie sicherstellen, dass Ihre app enthält die ngSanitize Modul. Ohne, dass es nicht funktioniert.
- ng-bind-html allein arbeitete, ohne mit trustAsHtml
- diese Funktion macht Sie sicher, dass html-exploits finden Sie unter hier
InformationsquelleAutor Jason
50

Dazu habe ich einen benutzerdefinierten filter verwenden.

In meiner app:
```
myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);
```
Dann, in der Ansicht:
```
<h1>{{ stuff.title}}</h1>

<div ng-bind-html="stuff.content | rawHtml"></div>
```
- dies funktionierte nicht für mich. noch immer roh-html
- Arbeitete für mich 🙂
- Dies ist eine hervorragende Lösung @Daniel. Wenn ich mit der $sce.trustAsHtml, ich dont müssen ngSanitize Abhängigkeit zu der app-Modul? Ich bin mit Angular 1.3
- das ist richtig.
- Können wir den ng-include um dies zu erreichen?
- dies funktioniert nicht für mich, ich bin mit Winkel-7. Freundlich darauf hin die Lösung. Danke.
InformationsquelleAutor Daniel

Sollte man Folgen Sie den Winkel-docs und verwenden, $sce $sce ist ein Dienst, der eine Strikt Kontextuelle Flucht Dienstleistungen zu AngularJS. Hier ist ein docs: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Nehmen wir ein Beispiel mit asynchroniously laden Eventbrite login-button

In Ihrem controller:

someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin', 
  function($scope, $sce, eventbriteLogin) {

    eventbriteLogin.fetchButton(function(data){
      $scope.buttonLogin = $sce.trustAsHtml(data);
    });
  }]);

In Ihrer Sicht nur hinzufügen:

<span ng-bind-html="buttonLogin"></span>

In Ihre Dienste:

someAppServices.factory('eventbriteLogin', function($resource){
   return {
        fetchButton: function(callback){
            Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
                callback(widget_html);
            })
      }
    }
});

InformationsquelleAutor martar

3

Im Winkel 4+, die wir benutzen können innerHTML - Eigenschaft anstelle der ng-bind-html.

In meinem Fall, es funktioniert und ich bin mit Winkel 5.
```
<div class="chart-body" [innerHTML]="htmlContent"></div>
```
In.ts-Datei
```
let htmlContent = 'This is the `<b>Bold</b>` text.';
```
- Es funktioniert für mich. Danke.
InformationsquelleAutor Ajay Gupta

Damit vielleicht möchten Sie diese in Ihrem index.html zum laden der library, script, und initialisieren Sie die app mit anzeigen:

<html>
  <body ng-app="yourApp">
    <div class="span12">
      <div ng-view=""></div>
    </div>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Dann yourView.html könnte nur sein:

<div>
  <h1>{{ stuff.h1 }}</h1>
  <p>{{ stuff.content }}</p>
</div>

scripts.js hätte Sie Ihren controller mit Daten $scope würde es.

angular.module('yourApp')
    .controller('YourCtrl', function ($scope) {
      $scope.stuff = {
        'h1':'Title',
        'content':"A paragraph..."
      };
    });

Schließlich werden Sie haben, um config-Routen und zuweisen der controller zum anzeigen, für die es $scope (d.h. Ihre Daten-Objekt)

angular.module('yourApp', [])
.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/yourView.html',
      controller: 'YourCtrl'
    });
});

Ich noch nicht getestet, sorry wenn es ein bug ist, aber ich denke, das ist die Angularish Weg, um Daten

Was ist, wenn ich will dieses Verhalten aber nicht davon ab, sich auf routeProvider?
Es ist das gleiche mit ui-router, nur dass es $stateProvider anstelle von $routeProvider und .Status( 'yourState', { url:'/', templateUrl: 'yourView.html', controller: 'YourCtrl' });

InformationsquelleAutor irth

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.