javascript - 如何为 angularjs 编写一个指令来替换 dom 元素但保持绑定

Question

从这个问题开始： 如何为 angularjs 编写一个指令，在不使用 ng-transclude 的情况下替换 dom 元素？

我希望编写一个指令来更改 dom 元素，然后保留所有属性和绑定。

<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

据我所知，Angular 会自动将属性移植到新元素。无需自己遍历它们。

在您的情况下，如果您想保留内容，您还需要嵌入内容。

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

这是我记忆中最深刻的，但我相信类似的事情会奏效。原元素的每一个属性都会被移植到新元素中，元素的内容也会被嵌入。绑定保存和所有。

Answer 2

在编译期间使用相同的逻辑并复制属性：

 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 3

（响应 Jason Swett 的更新请求）

这适用于 Angular 1.4.9（以及更早的概率）

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/