bağlamaları Bu soru aşağıdaki

Question

dom elemanı değiştirir ama tutar angularjs için bir emir yazmayı: how to write a directive for angularjs that replaces dom elements without using ng-transclude?

ben dom elemanı değiştiren bir direktif yazmak isteyen ama sonra tüm özellikleri ve bağlantıları korur. peşin

<g:text x={{myX}} y={{myY}} font-size=10>Hello There</g:text> 

için

<text x={{myX}} y={{myY}} font-size=10>Hello There</text> 

teşekkürler!

Answer 1

derleme sırasında aynı mantık kullanın ve özelliklerini kopyalamak:

app.directive('gText', function() { 
    return { 
     restrict: 'E', 
     compile: function(tElement, tAttrs) { 
      var attrs = tElement[0].attributes; 
      tElement.replaceWith('<text>' + tElement.text() + '</text>');    
      for (var i=0; i < attrs.length; i++) { 
       tElement.attr(attrs.item(i).nodeName, attrs.item(i).nodeValue);    
      } 
     } 
    } 
}); 

keman: my kadarıyla http://jsfiddle.net/YWfSF/

Answer 2

, Açısal irade portu otomatik olarak yeni elemana bağlıyor. Tüm bunları kendiniz üzerinde tekrarlamaya gerek yok. Bunu tutmak istiyorsanız Senin durumunda

, ayrıca içeriği transclude gerekir.

app.directive('myText', function() { 
    return { 
     replace: true, 
     template: '<text ng-transclude></text>' 
    } 
}); 

Bu, hafızamın en üst kısmından geliyor, ama sanırım buna benzer bir şey hile yapar. Orijinal öğenin her özelliği yeni öğeye taşınır ve öğenin içeriği de aktarılır. Binds korunmuş ve hepsi.

Answer 3

bu Açısal 1.4.9 çalışır

(güncelleştirme için Jason Swett talebine yanıt olarak) (ve prob önceki çok)

bu konuda büyük bir makale yer almaktadır

return { 
     restrict: 'E', // optional 
     replace: true, // optional 
     template: '<span data-ng-transclude></span>', 
     transclude: true, 
     link: function (scope, el, attrs) ......... 
} 

...

TRUE Attribut:

https://www.accelebrate.com/blog/angularjs-transclusion-part-1/