6

この質問に続いて: ng-transclude を使用せずに dom 要素を置き換える angularjs のディレクティブを作成する方法は?

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>

前もって感謝します！

4

3 に答える 3

8

私の知る限りでは、Angular は属性を新しい要素に自動的に移植します。それらすべてを自分で繰り返す必要はありません。

あなたの場合、コンテンツを保持したい場合は、コンテンツをトランスクルージョンする必要もあります。

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

これは私の記憶の一番上からですが、これに似たものがうまくいくと思います。元の要素のすべての属性が新しい要素に移植され、要素のコンテンツもトランスクルージョンされます。保存されたバインドとすべて。

于 2013-07-01T15:59:11.340 に答える
6

同じロジックを使用して、コンパイル中に属性をコピーします。 

 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/

于 2012-12-14T14:06:17.790 に答える