Angular.js: ng-カスタムディレクティブを使用して$indexでトラックを繰り返す

作成日 2017年11月15日  ·  3コメント  ·  ソース: angular/angular.js

私は提出しています...

  • []バグレポート
  • []機能リクエスト
  • [X]その他

現在の動作:

フィルタリングと配列が繰り返された後、分離されたスコープを持つ繰り返される各要素にカスタムディレクティブがあります。 カスタムディレクティブは再開されません。

これは予想される動作だと思いますが、混乱を招く可能性があるため、 track by $indexを置くとカスタムディレクティブに何ができるかを明確にする必要があります。

期待される/新しい動作:
NA

指示による問題の最小限の再現:

  1. 内部にカスタムディレクティブを使用してngrepeatを作成します($ indexによるトラックを含む)
  2. 繰り返し配列で$filterを使用すると、配列がフィルターされ、ディレクティブのデータが新しいフィルターされた配列を反映しないことがわかります。

AngularJSバージョン: 1.5.10

ブラウザ:すべて

他に何か:

track byを使用するときにAngularが実行していることと、カスタムディレクティブで$indexを使用しても機能しないこととの間で、ドキュメントをより明確にすることができますか?

問題の内訳については、ここで私の回答を確認してください
https://stackoverflow.com/a/47310734/2536454

ngRepeat docs

最も参考になるコメント

これは確かに予想される動作だと思います。 ドキュメントの引用:

アイテムが並べ替えられると、それぞれのテンプレートがDOMで並べ替えられます。

DOM要素の作成を最小限に抑えるために、ngRepeatは関数を使用して、コレクション内のすべてのアイテムとそれに対応するDOM要素を「追跡」します。 たとえば、アイテムがコレクションに追加された場合、ngRepeatは、他のすべてのアイテムにすでにDOM要素があることを認識し、それらを再レンダリングしません。

このような場合( track by $indexを使用する場合)、n番目のDOM要素は常に配列のn番目の項目と一致するため、対応する項目が変更されてもその要素のバインディングは更新されず、基本的に基になるデータと同期していないビュー。

すべてをまとめると、 $indexによる追跡は、最初のアイテムが常に同じであることをngRepeatに伝えます(同じインデックスを持っているため)。 ngRepeatは、インデックスが同じである限り、アイテムは同じであると言うため、基になるデータが変更されたことを認識しません(実際には、 $indexによる追跡が役立つことはめったにありません) 。

ngRepeatはアイテムが同じであるため、DOMは再作成されませんが、既存のDOMは保持されます(既存のスコープにバインドされるなど)。 したがって、テンパテに表示されるディレクティブは再コンパイルされません(コンパイル/リンクは新しいインスタンスを「スタンプアウト」するときにのみ発生するため)。

しかし、私たちはドキュメントでそれを説明するためにひどく良い仕事をしていないことを認めます:grin:
@ michael-letcher、ドキュメントを改善するためにPRを提出することに興味がありますか?

全てのコメント3件

もう少し具体的にする(または複製サンプルを提供する)可能性はありますか?
私にとってはうまくいくように見えるので、このプランカーから始めて問題を再現することができます。

https://plnkr.co/edit/dxzgjmE5MEA0bwQdckVS?p=preview

これは確かに予想される動作だと思います。 ドキュメントの引用:

アイテムが並べ替えられると、それぞれのテンプレートがDOMで並べ替えられます。

DOM要素の作成を最小限に抑えるために、ngRepeatは関数を使用して、コレクション内のすべてのアイテムとそれに対応するDOM要素を「追跡」します。 たとえば、アイテムがコレクションに追加された場合、ngRepeatは、他のすべてのアイテムにすでにDOM要素があることを認識し、それらを再レンダリングしません。

このような場合( track by $indexを使用する場合)、n番目のDOM要素は常に配列のn番目の項目と一致するため、対応する項目が変更されてもその要素のバインディングは更新されず、基本的に基になるデータと同期していないビュー。

すべてをまとめると、 $indexによる追跡は、最初のアイテムが常に同じであることをngRepeatに伝えます(同じインデックスを持っているため)。 ngRepeatは、インデックスが同じである限り、アイテムは同じであると言うため、基になるデータが変更されたことを認識しません(実際には、 $indexによる追跡が役立つことはめったにありません) 。

ngRepeatはアイテムが同じであるため、DOMは再作成されませんが、既存のDOMは保持されます(既存のスコープにバインドされるなど)。 したがって、テンパテに表示されるディレクティブは再コンパイルされません(コンパイル/リンクは新しいインスタンスを「スタンプアウト」するときにのみ発生するため)。

しかし、私たちはドキュメントでそれを説明するためにひどく良い仕事をしていないことを認めます:grin:
@ michael-letcher、ドキュメントを改善するためにPRを提出することに興味がありますか?

このページは役に立ちましたか?
0 / 5 - 0 評価