Vorwort
Eine der Macht von AngularJS ist das leistungsstarke Datenbindungsmerkmal. Zwei Dinge, die wir oft verwenden, sind NG-Bind und NG-Model für Form.
In unserem Projekt werden wir jedoch auf diese Situation stoßen, die im Hintergrund zurückgegebenen Daten enthalten verschiedene HTML -Tags.
wie:
$ scope.currentwork.description = "Hallo, <br> <b> Wohin gehen wir heute? </b>"
Wir verwenden Anweisungen wie NG-Bind-HTML, um zu binden, aber das Ergebnis ist nicht das, was wir wollen.
Das war's
Hallo, wohin gehen wir heute?
Was zu tun?
Für die Winkelversion 1.2 müssen wir den $ SCE -Dienst verwenden, um unser Problem zu lösen. Die sogenannte SCE ist die Abkürzung der "strengen kontextuellen Flucht". In Chinese übersetzt ist "strenger Kontextmodus" und kann auch als sichere Bindung verstanden werden.
Mal sehen, wie man es benutzt.
Controller -Code:
$ http.get ('/api/work/get? proboID =' + $ routesParams.workid) .success (function (work) {$ scope.currentwork = Arbeit;});HTML -Code:
<p> {{currentwork.description}} </p> Der Inhalt, den wir zurückgeben, enthält eine Reihe von HTML -Tags. Die Ergebnisse werden wie wir zu Beginn des Artikels angegeben. Zu diesem Zeitpunkt müssen wir es sicher sagen, dass wir es sicher binden sollen. Es kann mit $ sce.trustAsHtml() erfolgen. Diese Methode wandelt den Wert in die privilegierte Akzeptanz um und verwendet "ng-bind-html" sicher. Wir müssen also $ SCE Service in unserem Controller einführen
Controller ('TransferworkStep2', ['$ scope', '$ http', '$ routesParams', '$ sce', function ($ scope, $ http, $ routeParams, $ sce) {$ http.get ('/api/Work/Arbeit? Arbeit;HTML -Code:
<p ng-bind-html = "Currentwork.Description"> </p>
Dieses Ergebnis ist auf der Seite perfekt dargestellt:
Hallo, wohin gehen wir heute?
Wir können es auch so verwenden, es in einen Filter zusammenfassen und jederzeit auf der Vorlage aufrufen.
app.filter ('to_trusted', ['$ sce', function ($ sce) {return function (text) {return $ sce.trustashtml (text);};}]);HTML -Code:
<p ng-bind-html = "Currentwork.Description | to_trusted"> </p>
Zusammenfassen
In der obigen Stelle geht es um die NG-Bind-HTML-Richtlinie und den $ SCE-Service in AngularJs. Ich hoffe, es wird Ihnen helfen, zu studieren oder zu arbeiten. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.