0

私のプロジェクトでは、DOM を変更せず、DOM に存在するアーティファクトを残さないディレクティブを定義する必要があります。AngularJS でこれを機能させることができないようです。

次の例を検討してください。

<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>

関連するディレクティブは次のように定義されています。

var module = angular.module( 'component', [] );

module.directive('emptyArg', function() {
    template: '', 
    replace: true, 
    scope: false, 
    link: function() { // ... }
};

module.directive('nullArg', function() {
    template: null,
    replace: true,
    scope: false,
    link: function() { // .... }
};

コンパイル後、結果の DOM 要素は次のようになります。

<div></div>
<div></div>

しかし、テンプレートがないと、AngularJS が置換要求を無視し、結果の DOM 要素は次のようになります。

<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>

AngularJS がコンパイル後の DOM でこれらの属性を強制的に削除するにはどうすればよいですか?

これを示す jsFiddle は次の場所にあります。

http://jsfiddle.net/vankirkc/ezN3M/34/

アップデート：

作成された属性を作成後に削除することは可能ですが、私が実際に探しているのは、テンプレート定義パラメーターを活用して、このディレクティブをコピーしないように DOM 要素の作成をインターセプトする方法です。これはバージョン 1.0.3 では不可能のようです。

4

2 に答える 2

1

すべての属性を削除したい場合は、コンパイル関数で実行できます。

for(var i=0; i < tElement[0].attributes.length; i++){
    tElement.removeAttr(tElement[0].attributes[i].name)
};

フィドル。

更新: @Josh がコメントで指摘したように、属性を削除すると、基本的にこれは 1 回限りのディレクティブになり、属性はリンク関数で使用できなくなり、この回答は非回答/非解決策になります。 .

于 2013-01-10T21:51:37.420 に答える
1

実際には、「empty-arg」と「null-arg」は DOM 要素の通常の属性であり、AngularJS はそれらを使用して要素に適用するディレクティブをマークします。

したがって、1 つのディレクティブが DOM 要素から属性を削除する場合、実際には良くありません。たとえば、この属性を使用してその動作を変更する別のディレクティブを作成することができます。異なる AngularJS ライブラリでは、コントロールはngModel属性を使用して、要素がバインドされている式を取得します。

また、これらの属性はすでに DOM ツリーに存在するため、それらを削除すると DOM ツリーが変更され、パフォーマンスの問題が発生する可能性があります。

それでも実際にこれらの属性を削除したい場合は、リンク関数の 2 番目の引数を変更してみてください。

attrs.$set('empty',undefined);

しかし、一般的にはそうすることはお勧めしません:メモリをいくらか節約できます (しかし、それが保存されるかどうかはわかりません - ベンチマークする必要があると思います) が、DOM ツリーが変更されるため、読み込み時間が長くなります.

とにかく、これが可能であることを示すFiddleです。

于 2013-01-10T20:34:31.473 に答える