divラッパーまたはディレクティブタグを使用してディレクティブをフィルタリングする

Question

私は、AngularJSアプリケーションの中で、ページに表示される2つのディレクティブの中から最適な方法を選択し、不要なレンダリング/処理時間を避けようとしています。 ngRepeatループは、最良の方法であるかを知りたい：

の場合と同様に、ディレクティブのhtml要素に直接ng-ifを設定することによって：

<div ng-repeat="element in list"> 
    <my-directive-a ng-if="someFunction(element)"></my-directive-a> 
    <my-directive-b ng-if="!someFunction(element)"></my-directive-b> 
</div> 

またはディレクティブのテンプレートと使用から最初<div>を移動することにより、それぞれの指令のラッパーとして使用します。例えば：

<div ng-repeat="element in list"> 
    <div ng-if="someFunction(element)"> 
     <my-directive-a></my-directive-a> 
    </div> 
    <div ng-if="!someFunction(element)"> 
     <my-directive-b></my-directive-b> 
    </div> 
</div> 

注：各ディレクティブで始まる<div>要素はので、私は基本的にディレクティブのHTMLの外にそれを取ると、そこng-ifを配置するためにディレクティブ宣言の外に移動します同じ動作を変更することができ

この場合の最適なアプローチは何ですか？何らかの形でそれを行うことによってパフォーマンスに影響がありますか？それとも、同じことですか？リスト内の要素の数が非常に多くなる可能性があると考えてください。

Answer 1

彼らは全く同じですが、あなたはone-time bindingとパフォーマンスを向上させることができますが、elementは、（たとえば、のは、それが財産nameを持っている、とあなたsomeFunctionがreturn element.name === 'John'のようなものであることを言わせて）実行時に変更されない場合のみです。 Angularは値を返すときにこの関数を監視し、時計は削除されます。このソリューションを使用するには、2つの前提条件があります。

1. 要素リスト（あなたがsomeFunctionでそれらに依存している場合）を変更してはならないnameプロパティ名に依存している場合someFunction上のウォッチャーであるため、例えば、変更されないのプロパティご注意ください。あなたはこれで何を得る
2. プロパティが変更リストの変更やその要素は、あなたがすべてのリストをリロード（あなたはその変更が発生した知っている場合たとえば、あなたは再びそれをサーバーからフェッチ）

？ my-directiveがng-ifに描かれた後に時計がなくなり、何かが変更された場合、新しい参照はlistにバインドされます（たとえば、サーバーから来る）、すべてが再描画され、ng-ifが再び実行され、関数は値を返します）、バインドされません。それはどのように見える？このように：

<div ng-repeat="element in list"> 
    <div ng-if="::(someFunction(element))"> 
     <my-directive-a></my-directive-a> 
    </div> 
    <div ng-if="::(!someFunction(element))"> 
     <my-directive-b></my-directive-b> 
    </div> 
</div> 

表現前の2つのコロン。しかし、一度バインドすると簡単に扱えないことに注意してください。コードをテストして確実に動作することを確認する必要があります。