làm thế nào để viết một chỉ thị cho angularjs thay thế các yếu tố dom nhưng giữ bindings

Question

sau ngày từ câu hỏi này: how to write a directive for angularjs that replaces dom elements without using ng-transclude?

Tôi muốn viết một chỉ thị rằng những thay đổi các yếu tố dom nhưng sau đó giữ lại tất cả các thuộc tính và các ràng buộc.

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

để

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

cảm ơn trước!

Answer 1

Sử dụng cùng một logic và sao chép các thuộc tính trong biên dịch:

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

fiddle: http://jsfiddle.net/YWfSF/

Answer 2

Để theo sự hiểu biết của tôi, góc di chúc cảng thuộc tính đến các yếu tố mới tự động. Không cần phải tự mình lặp lại chúng.

Trong trường hợp của bạn, bạn cũng cần phải chuyển đổi nội dung nếu bạn muốn giữ nội dung đó.

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

Đây là từ đầu bộ nhớ của tôi, nhưng tôi tin rằng điều gì đó tương tự như điều này sẽ làm điều này. Mỗi thuộc tính của phần tử gốc sẽ được chuyển đến phần tử mới và nội dung của phần tử cũng sẽ được chuyển đổi. Binds bảo tồn và tất cả.

Answer 3

(Để đối phó với yêu cầu Jason Swett cho một bản cập nhật)

công trình này trong 1.4.9 kiễu góc (và prob sớm quá)

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

Một bài viết tuyệt vời về điều này là tại ...

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