Heim > Artikel > Web-Frontend > So binden Sie HTML dynamisch
So binden Sie HTML dynamisch
- 高洛峰Original
- 2017-03-08 15:49:531235Durchsuche
Bei der Web-Front-End-Entwicklung stoßen wir häufig auf die Notwendigkeit, einige HTML-Strings dynamisch vom Backend zu binden oder sie dynamisch an die DOM-Anzeige der Seite anzuschließen, insbesondere in Content-Management-Systemen (Abkürzung CMS: Content Management System). sind ü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.
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
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 Mit einfachem statischem HTML wird dieses Problem 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 Implementierung dieser Funktion zur Verfügung. 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 Überwacht Änderungen im HTML-Wert des Bindungsattributs und versucht dann, den eingehenden HTML-Bereich mithilfe des $compile-Dienstes dynamisch zu verbinden und den aktuellen DOM-Knoten zu erstellen Der Grund für den Bereich besteht darin, den Bereich bei jeder Zerstörung des DOM einfach zu zerstören, die durch die HTML-Kompilierung bereitgestellte Watcher-Funktion zu entfernen und zu versuchen, den Bereich zu zerstören, wenn der letzte übergeordnete Bereich zerstört wird.
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.
Das obige ist der detaillierte Inhalt vonSo binden Sie HTML dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!