Question

继续这个问题： how to write a directive for angularjs that replaces dom elements without using ng-transclude?

我希望编写一个更改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/

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

3 个答案: