AngularJS: ng-bind-html- und ng-non-bindable-Direktiven

Was sind ng-bind-HTML-Anweisungen?

Die ng-bind-HTML-Direktive wird zum sicheren Anhängen des Inhalts an das HTML-Element verwendet und stellt den HTML-Code als anklickbare Anker-Tags dar. Um diese Direktive nutzen zu können, sollten Sie „angular-sanitize.js“ in Ihrer Anwendung verwenden, um den Dienst „$sanitize“ zu nutzen.

Das Wort „sanitize“ bedeutet „sauber“ und „reinigen“, was den HTML-Inhalt bereinigt und sicheres HTML-Markup ermöglicht, das keine gefährlichen Attribute enthält. Der von $sanitize verwaltete Inhalt wird von Angular als vertrauenswürdiger Inhalt betrachtet.
Sie können den $sanitize-Dienst implizit verwenden, indem Sie der Seite mithilfe des folgenden CDN ein zusätzliches Skript hinzufügen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"> </script>  

ng-bind-HTML-Syntax

Die ng-bind-HTML-Direktive hat die folgende Syntax:

<tag_name ng-bind-html="expression"></tag_name>

Wo:
tag_name ist ein beliebiges Element wie div, span usw. und expression enthält eine Variable oder einen Ausdruck, der an das Scope-Objekt angehängt werden kann.

ng-bind-HTML-Beispiel

Das folgende Beispiel zeigt die Verwendung der ng-bind-HTML-Direktive in AngularJS:

<html>
   <head>
      <title>AngularJS ng-bind-html Directive</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"></script>
      <script type="text/javascript">
         var app = angular.module('myapp', ['ngSanitize']);
         app.controller('myController', ['$scope',function($scope) {
          $scope.myVal="Welcome to AngularJS.." +
         'Click the link to visit <a href="https://docs.angularjs.org/api">AngularJS Site</a>';
      }]);
      </script>
   </head>
   <body>
      <div ng-app="myapp">
         <div ng-controller="myController">
            <p ng-bind-html="myVal"></p>
         </div>
      </div>
   </body>
</html>

ng-bind-Anweisungen

  • Um die Funktionalität der ng-bind-HTML-Direktive zu nutzen, verwenden Sie zunächst das zusätzliche Skript zur Verwendung des $sanitize-Dienstes und fügen Sie es in das Head-Tag ein.
  • Das Modul wird durch den Winkel erstellt. Modulfunktion, die den Parameter „app“ annimmt, der auf das HTML-Element ng-bind verweist.
  • Um den $sanitize-Dienst zu verwenden, definieren Sie ngSanitize als Abhängigkeit im Modul.
  • Mithilfe des Parameters „app“ können Sie der Anwendung Controller, Anweisungen, Filter usw. hinzufügen.
  • Der Controller kann mit der ng-controller-Direktive an das DOM angehängt werden und den Anfangszustand des Bereichs einrichten, indem eine Eigenschaft an das $scope-Objekt angehängt wird.
  • Die ng-bind-HTML-Direktive hängt den HTML-Inhalt mithilfe des Bereichsobjekts myVal an das Element an.

Ausführen der ng-bind-HTML-Beispielanwendung

Speichern wir den obigen Code in einer HTML-Datei als ng-bind-HTML-example.html im Stammordner des Servers und öffnen Sie diese HTML-Datei in einem Standardbrowser als http://localhost/ng-bind-HTML-example.html und Sie erhalten die Ausgabe wie unten angezeigt:

ng-bind-html Beispielanweisungen

Was sind ng-non-bindable-Anweisungen?

Die ng-non-bindable-Direktive kann verwendet werden, wenn Sie den Inhalt nicht kompilieren oder an das HTML-Element anhängen möchten. Mit anderen Worten: Der angegebene Inhalt sollte nicht von der AngularJS-Anwendung kompiliert werden.

ng-non-bindable-Syntax

Die ng-non-bindable-Direktive hat die folgende Syntax:

<tag_name ng-non-bindable></tag_name>

Diese Direktive enthält keine Parameter.

ng-non-bindable Beispiel

Das folgende Beispiel zeigt die Verwendung der ng-bind-Direktive in AngularJS:

<html>
   <head>
      <title>AngularJS ng-non-bindable Directive</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
   <body>
      <div ng-app="">
              <p>The bindable data: {{10 + 10}}</p>
            <p>The non bindable data:  <span ng-non-bindable>{{10 + 10}}</span></p>
      </div>
   </body>
</html>
    • Die ng-app-Direktive definiert die AngularJS-Anwendung und gibt das Stammelement der Anwendung an.
    • Wir haben doppelte geschweifte Klammern {{ }} verwendet, um den Inhalt der Anwendung anzuzeigen.
    • Die ng-non-bindable-Direktive kompiliert die Daten nicht und bindet sie an das HTML-Element.
    • Die Daten zwischen doppelten geschweiften Klammern, die zusammen mit der ng-non-bindable-Direktive definiert wurden, binden keine Daten an das HTML-Element und behalten den gleichen Inhalt.

Ausführen einer ng-non-bindable-Beispielanwendung

Speichern wir den obigen Code in einer HTML-Datei als ng-non-bindable-example.html im Stammordner des Servers und öffnen Sie diese HTML-Datei in einem Standardbrowser als http://localhost/ng-non-bindable-example.html und Sie erhalten die Ausgabe wie unten dargestellt:

ng-non-bindable Beispiel

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen