jak napisać dyrektywę dla angularjs który zastępuje elementu DOM, ale zachowuje Wiązania

Question

opierając się na to pytanie: how to write a directive for angularjs that replaces dom elements without using ng-transclude?

Chciałbym napisać dyrektywy, która zmienia elementu DOM ale zachowuje wszystkie atrybuty i powiązania.

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

do

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

z góry dzięki!

Answer 1

Użyj tej samej logiki i skopiować atrybuty podczas kompilacji:

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);    
      } 
     } 
    } 
}); 

skrzypce: http://jsfiddle.net/YWfSF/

Answer 2

Zgodnie z moją najlepszą wiedzą, kątowe port będzie atrybutów nowego elementu automatycznie. Nie musisz sam ich powtarzać.

W twoim przypadku musisz również przetłumaczyć zawartość, jeśli chcesz ją zachować.

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

To ze szczytu mojej pamięci, ale wierzę, że coś podobnego do tego by rade. Każdy atrybut oryginalnego elementu zostanie przeniesiony do nowego elementu, a zawartość elementu również zostanie przetłumaczona. Wiązania zachowane i wszystkie.

Answer 3

(W odpowiedzi na Jason Swett wniosku o aktualizację)

to działa w ruchu obrotowym 1.4.9 (i prob wcześniej zbyt)

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

ciekawy artykuł na ten temat znajduje się w ...

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