AngularJS - aggiungi l'elemento HTML alla direttiva dom senza jQuery

Question

Ho una direttiva AngularJS in cui voglio aggiungere un tag svg all'attuale elemento della direttiva. In questo momento faccio questo con l'aiuto di jQuery

link: function (scope, iElement, iAttrs) { 

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

    ... 
    } 

Eppure io non voglio la direttiva di dipendere da jQuery per questo semplice compito. Come potrei ottenere lo stesso con mezzi AngularJS (o codice JavaScript nativo).

Answer 1

Perché non provare semplice (ma potente) html() Metodo:

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

O append come alternativa:

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

E , naturalmente, un modo più pulito:

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

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

Answer 2

Si potrebbe usare qualcosa di simile

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

Answer 3

In angularJS, è possibile utilizzare angular.element che è la versione lite di jQuery. Puoi fare praticamente tutto con esso, quindi non devi includere jQuery.

Quindi, in pratica, è possibile riscrivere il codice per qualcosa di simile:

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

Answer 4

Se il vostro elemento di destinazione è vuota e conterrà solo il tag <svg> si potrebbe considerare l'utilizzo di ng-bind-html come segue:

Declare il tuo tag HTML nella variabile scope direttiva

link: function (scope, iElement, iAttrs) { 

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

    ... 
} 

Quindi, nel modello di direttiva, basta aggiungere il p Roper attributo esattamente nel luogo che si desidera aggiungere il tag svg:

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

Non dimenticare di includerengSanitize per consentire ng-bind-html per analizzare automaticamente la stringa HTML in HTML di fiducia ed evitare insicuri avvisi di iniezione di codice.

See official documentation per ulteriori dettagli.