Angularjs：ディレクティブのすべてのインスタンスを検索

Question

セクションごとに矢印キーでページをナビゲートできるように指示を作成しようとしています。しかし、私はまた、それらのセクションをdomの周りに散らばって、物が追加されたり削除されたりしてもこれが壊れないようにしたいと思っています。私はこれを行うには、いくつかの方法を考えることができ、それらのどれも満足のいくものでない：

• は他のディレクティブは、自分自身を登録（そして$破壊に登録解除）することができますコントローラとディレクティブを作成します。後で途中で何かを追加すると、これはうまくいかないでしょう。また、私はこのように記述しようとしましたが、必要以上にコードが多くなるようです。

• ユーザーが矢印キーを押すたびに、空の配列を作成し、イベントをブロードキャストし、ディレクティブがそのリストに登録されるようにコールバックを設定します。その後、そのリストがいっぱいになったら、前に進んでください。彼らはDOM上の順番に戻ってくるはずですが、私はこの方法が狂ってハックしているとは確信していません。

• 「tabbable」というものをCSSでマークし、これをjqueryなどの簡単な方法で記述します。新しいクリックイベントの場合はvar all = $('.tabbable')にしてください。しかし、私は本当にそれをやりたいとは思っていません。なぜなら、それは「角度のある」方法ではないからです。何らかの純粋さからではなく、これをウィジェットのより大きなライブラリの一部として構築しているので、私はこの機能をアクセシブルにしたいと思っています。

だから、私は奇妙なハックに頼る、またはすべての場所でアウトロジックを広げずに、特定のタイプのすべてのディレクティブのスコープを取得するための方法はありますか？

Answer 1

AngularJS servicesはシングルトンであり、依存性注入によって必要とされる可能性があります。あなたは、あなたの指示に州のマネージャーサービスと通話の増分/減分を要求することができます。

もう少し簡単ですが脆い場合は、$ rootScopeに配列を保持できます。 jQueryセレクターの世界よりももっと慣用的な "角張った"（しかし多くはない）が、おそらくウィジェットライブラリを構築している最善のルートではありません。

Answer 2

これは良い質問です。 +1

まず、すべてのディレクティブまたはノードをタイプ別に検索すると、角度の向きになります。 ViewはAngularJSの公式記録であるため、ディレクティブは彼らが何をしているかを述べ、彼らの言うことを行うべきです。 DOMノードをスキャンしてそれに応じて処理するために、どこかのプロセスをコーディングすることは、いくつかの理由で問題がありますが、懸念事項とテスト容易性の分離はほとんどありません。

あなたが他のオプションを検討しているのを嬉しく思いますが、あなたが提供した他のオプションがあなたが言及した理由のために最適ではないことに同意します。しかし私はもう一つ持っています。これは私が別のアプリケーションのために使用したものですが、分散DOMノードに関する知識が必要です。

まず、このコンポーネントの状態を管理するサービスを作成します。それは簡単です。それをSectionsServiceとしましょう。次に、セクションを登録するためのディレクティブを作成します。簡単にするためにsectionとしましょう。 sectionディレクティブは、リンクフェーズ中にSectionsServiceを使用してDOMノードのIDを登録します（一意性を保証するためにプログラムで作成することもできます）。 DOMは（ほとんどの場合）順番に処理されるため、SectionsServiceに追加されたノードも順番になります。だから、DOMは、この（省略無関係なもの）のようになります。

<div section>...</div> 

<!-- other stuff --> 

<div section>...</div> 

<!-- other stuff --> 

<!-- etc. --> 

（ここではスコープの外に、順序が重要ではないような方法でそれをプログラムすることは非常に困難になるが、それはないだろうけど

次に、矢印キーハンドラのようなトリガを作成します。これらのイベントでは、単にSectionServiceにリストの前/次のノードに行くように指示します。 AngularJSには$anchorScrollというサービスがあり、これは私たちがよく知っているブラウザのハッシュベースの位置をエミュレートするために使用できます。また、必要に応じて、スクロールをアニメーション化するためにjQueryプラグインを使用することもできます。

それだけです！非常に単純な指示、かなり簡単なサービス、そして必要なトリガー。すべては、私はテストを含む100行未満のコードを推測します。すべてのコンポーネントはデカップリングされ、簡単にテスト可能ですが、依然として非常に簡単です。ビューは真実のままです。 Angular Wayは保存されます。

そして、たくさんの喜びがありました。

---

これが正しい方向に向いていることを願っていますが、もちろんフォローアップの質問をお願いします。もしあなたが望むのであれば、コードの詳細についても話すことができます。私が言ったように、彼らはあまり複雑ではないでしょう。