suchen

Heim  >  Artikel  >  Web-Frontend  >  Analyse der Methode zur dynamischen Bindung von HTML in AngularJS

Analyse der Methode zur dynamischen Bindung von HTML in AngularJS

高洛峰
高洛峰Original
2016-12-24 09:59:261164Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Binden von HTML in AngularJS. Geben Sie es wie folgt als Referenz an alle weiter:

Bei der Web-Frontend-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 anzupassen, insbesondere im Inhalt Solche Anforderungen gibt es ü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 Client-Code in Webseiten und deren 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 Benutzererfahrung, die Benutzer und andere illegale Verhaltensweisen hervorruft. Manchmal werden XSS-Angriffe mit anderen Angriffsmethoden kombiniert, z. B. SQL-Injection-Angriffe auf Server und Datenbanken, Click-Hijacking, relative Link-Hijacking usw., um Phishing zu implementieren. und es ist auch ein Netz. 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 = &#39;<p>hello <a href="https://angular.io/">angular</a></p>&#39;;
    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: &#39;EA&#39;,
      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 = &#39;<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>&#39;;
    vm.link = &#39;https://angular.io/&#39;;
    var i = 0;
    vm.change = function() {
      vm.html = &#39;<h3>change after : <a ng-href="{{demo.link}}">&#39; + (++i) + &#39;</a></h3>&#39;;
    };
  }]);

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.

Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich sein wird.

Für weitere Analysen der AngularJS-Methode zur dynamischen Bindung von HTML schauen Sie sich bitte die chinesische PHP-Website an!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：AngularJS implementiert eine Methode zum Binden von Ereignissen an dynamisch generierte ElementeNächster Artikel：AngularJS implementiert eine Methode zum Binden von Ereignissen an dynamisch generierte Elemente

In Verbindung stehende Artikel

Mehr sehen