AngularJS - jQuery

Question

olmadan direktifte HTML öğesine HTML elemanı ekle Direktifin geçerli öğesine bir svg etiketi eklemek istediğim bir AngularJS yönergesine sahibim. Şu anda jQuery

link: function (scope, iElement, iAttrs) { 

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

    ... 
    } 

yardımıyla bunu Oysa ben yönerge bu basit görev için jQuery bağımlı istemiyoruz. AngularJS araçlarını (veya yerel JavaScript kodunu) kullanarak bunu nasıl başarabilirim.

Answer 1

gibi bir şey kullanabilirsiniz: bir alternatif olarak

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

Veya append:

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

Ve Tabii ki, daha temiz bir şekilde:

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

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

Answer 2

basit (ama güçlü) html() yöntemini denemek için değil Neden bu

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

Answer 3

angularjs olarak, jQuery lite versiyonu olan angular.element kullanabilirsiniz. Onunla hemen hemen her şeyi yapabilirsiniz, bu yüzden jQuery eklemeniz gerekmez. Hedef eleman boşsa

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

ve sadece aşağıdaki gibi ng-bind-html kullanarak düşünebiliriz <svg> etiketini içerir: Yani temelde

, böyle bir şey için kodunuzu yeniden yazabilirsiniz

Declare

link: function (scope, iElement, iAttrs) { 

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

    ... 
} 

Sonra değişken yönerge kapsamında HTML etiketi, sizin direktifi şablonunda, sadece p eklemek Roper Eğer svg etiketi eklemek istediğiniz tam yerinde bağlıyor:

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

ng-bind-html otomatik güvenilen HTML HTML dizesini ayrıştırmak ve güvensiz kod enjeksiyon uyarıları önlemek için izin ngSanitize eklemeyi unutmayın. Daha fazla bilgi için

See official documentation.