web-dev-qa-db-fra.com

AngularJS - Ajoute un élément HTML à dom dans une directive sans jQuery

J'ai une directive AngularJS dans laquelle je veux ajouter une balise svg à l'élément actuel de la directive. À l'heure actuelle, je le fais avec l'aide de jQuery

link: function (scope, iElement, iAttrs) {

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

    ...
    }

Pourtant, je ne veux pas que la directive dépende de jQuery pour cette tâche simple. Comment pourrais-je accomplir la même chose avec AngularJS signifie (ou code JavaScript natif).

javascriptjqueryhtmlangularjs
39
dorjeduck

Pourquoi ne pas essayer une méthode simple (mais puissante) html():

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

Ou append comme alternative:

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

Et, bien sûr, de manière plus propre:

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

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

57
Cherniv

Dans angularJS, vous pouvez utiliser angular.element, qui est la version allégée de jQuery. Vous pouvez faire à peu près tout avec cela, vous n'avez donc pas besoin d'inclure jQuery.

Donc, fondamentalement, vous pouvez réécrire votre code en quelque chose comme ceci:

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

Vous pourriez utiliser quelque chose comme ça

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

Si votre élément de destination est vide et ne contiendra que la balise <svg>, Vous pouvez envisager d'utiliser ng-bind-html Comme suit:

Déclarez votre balise HTML dans la variable scope de la directive

link: function (scope, iElement, iAttrs) {

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

    ...
}

Ensuite, dans votre modèle de directive, ajoutez simplement l'attribut approprié à l'endroit exact où vous souhaitez ajouter la balise svg:

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

N'oubliez pas d'inclure ngSanitize pour permettre à ng-bind-html D'analyser automatiquement la chaîne HTML en HTML de confiance et d'éviter les problèmes d'insécurité. avertissements d'injection de code.

Voir la documentation officielle pour plus de détails.

2
Freezystem