web-dev-qa-db-de.com

AngularJS - Fügt ein HTML-Element zu dom in der Direktive ohne jQuery hinzu

Ich habe eine AngularJS-Direktive, in der ich dem aktuellen Element der Direktive ein svg-Tag hinzufügen möchte. Im Moment mache ich das mit Hilfe von jQuery

link: function (scope, iElement, iAttrs) {

    var svgTag = $('<svg width="600" height="100" class="svg"></svg>');
    $(svgTag).appendTo(iElement[0]);

    ...
    }

Ich möchte jedoch nicht, dass die Direktive für diese einfache Aufgabe von jQuery abhängt. Wie würde ich dasselbe mit AngularJS-Mitteln (oder nativem JavaScript-Code) erreichen?.

javascriptjqueryhtmlangularjs
39
dorjeduck

Warum nicht die einfache (aber mächtige) Methode html() ausprobieren:

iElement.html('<svg width="600" height="100" class="svg"></svg>');

Oder append als Alternative:

iElement.append('<svg width="600" height="100" class="svg"></svg>');

Und natürlich sauberer:

 var svg = angular.element('<svg width="600" height="100" class="svg"></svg>');
 iElement.append(svg);

Fiddle: http://jsfiddle.net/cherniv/AgGwK/

57
Cherniv

In AngularJS können Sie Angular.Element verwenden, das die Lite-Version von jQuery ist. Sie können so ziemlich alles damit machen, sodass Sie jQuery nicht einbinden müssen.

Grundsätzlich können Sie Ihren Code so umschreiben:

link: function (scope, iElement, iAttrs) {
  var svgTag = angular.element('<svg width="600" height="100" class="svg"></svg>');
  angular.element(svgTag).appendTo(iElement[0]);
  //...
}
16
nXqd

Sie könnten so etwas gebrauchen

var el = document.createElement("svg");
el.style.width="600px";
el.style.height="100px";
....
iElement[0].appendChild(el)
6
Pavel

Wenn Ihr Zielelement leer ist und nur das Tag <svg> Enthält, können Sie ng-bind-html Folgendermaßen verwenden:

Deklarieren Sie Ihr HTML-Tag in der Bereichsvariablen der Direktive

link: function (scope, iElement, iAttrs) {

    scope.svgTag = '<svg width="600" height="100" class="svg"></svg>';

    ...
}

Fügen Sie dann in Ihrer Direktivenvorlage das richtige Attribut genau an der Stelle hinzu, an der Sie das svg-Tag anhängen möchten:

<!-- start of directive template code -->
...
<!-- end of directive template code -->
<div ng-bind-html="svgTag"></div>

Vergessen Sie nicht, ngSanitize einzuschließen, damit ng-bind-html Die HTML-Zeichenfolge automatisch in vertrauenswürdiges HTML konvertiert und Unsicherheiten vermieden werden Warnhinweise zur Code-Eingabe.

Siehe offizielle Dokumentation für weitere Details.

2
Freezystem