कैसे कि डोम तत्व को बदल देता है लेकिन रहता बाइंडिंग

Question

इस सवाल से पर निम्नलिखित AngularJS के लिए एक निर्देश लिखने के लिए: how to write a directive for angularjs that replaces dom elements without using ng-transclude?

मैं एक निर्देश है कि डोम तत्व को परिवर्तित करता लिखना चाहते हैं लेकिन तब सभी विशेषताओं और बाइंडिंग बरकरार रखती है।

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

को

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

अग्रिम धन्यवाद!

Answer 1

एक ही तर्क का उपयोग करें और विशेषताओं की प्रतिलिपि संकलन के दौरान:

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

बेला: http://jsfiddle.net/YWfSF/

Answer 2

मेरी जानकारी के अनुसार करने के लिए

, कोणीय इच्छा बंदरगाह नए तत्व के लिए स्वचालित रूप से जिम्मेदार बताते हैं। उन सभी को फिर से भरने की जरूरत नहीं है।

अपने मामले में, यदि आप इसे रखना चाहते हैं तो आपको सामग्री को स्थानांतरित करने की भी आवश्यकता होगी।

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

यह मेरी याददाश्त के शीर्ष से है, लेकिन मेरा मानना ​​है कि इससे कुछ ऐसा ही चाल होगा। मूल तत्व की प्रत्येक विशेषता को नए तत्व में भेज दिया जाएगा, और तत्व की सामग्री भी अलग हो जाएगी। संरक्षित और सब बांधता है।

Answer 3

इस कोणीय 1.4.9 में काम करता है (एक अद्यतन के लिए जेसन Swett अनुरोध के जवाब में) (और इससे पहले भी समस्या)

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

इस पर एक महान लेख है ...

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