Analyse der Methode zur dynamischen Bindung von HTML in AngularJS
- 高洛峰Original
- 2016-12-07 15:06:161265Durchsuche
Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Binden von HTML in AngularJS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Bei der Web-Front-End-Entwicklung stoßen wir häufig auf die Notwendigkeit, einige HTML-Strings dynamisch vom Backend zu binden oder dynamisch an die DOM-Anzeige der Seite anzuschließen. Insbesondere in Content-Management-Systemen (CMS: die Abkürzung für Content Management System) gibt es solche Anforderungen überall.
Angular-Leser werden auf jeden Fall zuerst an ngBindHtml denken. Ja, Angular stellt uns diese Anweisung zum dynamischen Binden von HTML zur Verfügung. Es bindet das berechnete Ausdrucksergebnis mithilfe von innerHTML. Allerdings ist das Problem nicht so einfach. In der Web-Sicherheit ist XSS (Cross-Site-Scripting, Script-Injection-Angriff) eine typische Computersicherheitslücke in Webanwendungen. XSS-Angriffe beziehen sich auf das Einfügen von ausführbarem clientseitigem Code in Webseiten und dessen erfolgreiche Ausführung durch den Browser, um den Zweck des Angriffs zu erreichen. Sobald der Angriff erfolgreich ist, können einige vertrauliche Informationen des Benutzers abgerufen werden. Um das Benutzererlebnis zu verändern und andere illegale Verhaltensweisen hervorzurufen, werden XSS-Angriffe manchmal mit anderen Angriffsmethoden wie SQL-Injection-Angriffen auf Server und Datenbanken, Click-Hijacking, Relative-Link-Hijacking usw. kombiniert, um Phishing zu implementieren riesig, und es ist auch ein Web Der größte Feind der Sicherheit. Weitere Informationen zu Web-Sicherheitsproblemen finden Sie im Wiki https://en.wikipedia.org/wiki/Cross-site_scripting%E3%80%82
In Angular ist die Standardeinstellung, dem hinzugefügten HTML nicht zu vertrauen Der hinzugefügte HTML-Inhalt muss zuerst $sce.trustAsHtml verwenden, um Angular mitzuteilen, dass es sich um vertrauenswürdigen HTML-Inhalt handelt. Andernfalls erhalten Sie den Ausnahmefehler $sce:unsafe.
Fehler: [$sce:unsafe] Versuch, einen unsicheren Wert in einem sicheren Kontext zu verwenden.
Das Folgende ist eine Demo, die einen einfachen Winkellink bindet:
HTML :
<div ng-controller="DemoCtrl as demo"> <div ng-bind-html="demo.html"></div> </div>
JavaScript:
angular.module("com.ngbook.demo", [])
.controller("DemoCtrl", ["$sce", function($sce) {
var vm = this;
var html = '<p>hello <a href="https://angular.io/">angular</a></p>';
vm.html = $sce.trustAsHtml(html);
return vm;
}]);
Für einfaches statisches HTML , Dieses Problem ist gelöst. Bei komplexem HTML bezieht sich Komplexität hier jedoch auf HTML-Vorlagen mit Angular-Ausdrücken und -Anweisungen. Für sie hoffen wir nicht nur, große DOM-Anzeigen zu binden, sondern auch den leistungsstarken bidirektionalen Bindungsmechanismus von Angular zu erhalten. ngBindHhtml wird nicht mit $scope für die bidirektionale Bindung verknüpft. Wenn ngClick, ngHref, ngSHow, ngHide und andere Winkelanweisungen vorhanden sind, wird das Klicken auf diese Schaltflächen keine Reaktion hervorrufen Die Formel wird nicht aktualisiert. Wenn Sie beispielsweise versuchen, den letzten Link in „ng-href="demo.link" zu ändern, wird der Link nicht analysiert und die ursprüngliche HTML-Zeichenfolge wird weiterhin im DOM angezeigt.
Um wirksam zu werden, müssen alle Anweisungen in Angular kompiliert werden, enthalten Pre-Link und Post-Link und sind mit bestimmten Verhaltensweisen verbunden, bevor sie funktionieren können. In den meisten Fällen wird die Kompilierung automatisch beim Start von Angular durchgeführt. Wenn es sich jedoch um eine dynamisch hinzugefügte Vorlage handelt, müssen Sie diese manuell kompilieren. Angular stellt uns den Dienst $compile zur Verfügung, um diese Funktion zu implementieren. Das Folgende ist ein allgemeineres Kompilierungsbeispiel:
HTML:
<body ng-controller="DemoCtrl as demo">
<dy-compile html="{{demo.html}}">
</dy-compile>
<button ng-click="demo.change();">change</button>
</body>
JavaScript:
angular.module("com.ngbook.demo", [])
.directive("dyCompile", ["$compile", function($compile) {
return {
replace: true,
restrict: 'EA',
link: function(scope, elm, iAttrs) {
var DUMMY_SCOPE = {
$destroy: angular.noop
},
root = elm,
childScope,
destroyChildScope = function() {
(childScope || DUMMY_SCOPE).$destroy();
};
iAttrs.$observe("html", function(html) {
if (html) {
destroyChildScope();
childScope = scope.$new(false);
var content = $compile(html)(childScope);
root.replaceWith(content);
root = content;
}
scope.$on("$destroy", destroyChildScope);
});
}
};
}])
.controller("DemoCtrl", [function() {
var vm = this;
vm.html = '<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>';
vm.link = 'https://angular.io/';
var i = 0;
vm.change = function() {
vm.html = '<h3>change after : <a ng-href="{{demo.link}}">' + (++i) + '</a></h3>';
};
}]);
Hier wird eine Direktive namens dy-compile erstellt. Sie wartet zunächst auf Änderungen im HTML-Wert des Bindungsattributs und versucht zunächst, einen Unterbereich zu erstellen . und verwenden Sie dann den $compile-Dienst, um das eingehende HTML dynamisch zu verbinden und den aktuellen DOM-Knoten zu ersetzen. Der Grund für die Erstellung eines Unterbereichs besteht darin, die Zerstörung des Bereichs bei jeder Zerstörung des DOM zu erleichtern und das HTML-Kompilierungsband zu entfernen Watchers-Funktion, und wenn der letzte übergeordnete Bereich zerstört wird, wird auch versucht, den Bereich zu zerstören.
Aufgrund der oben genannten Kompilierung und Verbindung kann die ngHref-Anweisung wirksam werden. Hier ist nur ein Versuch, ein Beispiel für ein dynamisches Kompilierungs-Winkelmodul zu geben. Für spezifische Implementierungsmethoden wenden Sie sich bitte an Ihr Unternehmen, um spezifische Anweisungen zu deklarieren.