15

ユーザーがセクションごとに矢印キーでページをナビゲートできるようにするディレクティブを作成しようとしています。しかし、私はまた、それらのセクションを dom の周りに散らばらせ、何かが追加されたり削除されたりしても壊れないようにしたいと考えています。これを行う方法はいくつか考えられますが、どれも満足のいくものではありません。

  • 他のディレクティブが自分自身を登録できる (そして $destroy で登録解除できる) コントローラーを使用してディレクティブを作成します。でも、途中で何かを追加すると、これは故障します。また、この方法で書いてみましたが、必要以上のコードのようです。

  • ユーザーが矢印キーを押すたびに、空の配列を作成し、そのリストに自分自身を登録するためのディレクティブのコールバックを使用してイベントを $broadcast します。次に、そのリストがいっぱいになったら、そのリストを進めたり戻したりします。それらは (すべき?) DOM 上にある順序で戻ってきますが、この方法はクレイジーでハックのように見えるので、よくわかりません。

  • css で「タブ可能」であることをマークし、これを jquery で次のような簡単な方法で記述しますvar all = $('.tabbable')。しかし、それは「角度のある」方法ではないため、実際にはそのようにしたくありません。純粋さからではありませんが、私はこれをウィジェットのより大きなライブラリの一部として構築しており、この機能にアクセスできるようにしたいからです。

それで、奇妙なハックに頼ったり、ロジックをあちこちに広げたりせずに、特定のタイプのすべてのディレクティブのスコープを取得する方法はありますか?

4

2 に答える 2

5

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

まず、タイプごとにすべてのディレクティブまたはノードを見つけることは、Angular の方法に反します。View は AngularJS の公式記録であるため、ディレクティブは何を行うかを記述し、その内容を実行する必要があります。DOM ノードをスキャンしてそれに応じて動作するプロセスをどこかにコーディングすることは、いくつかの理由で問題があります。

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

まず、このコンポーネントの状態を管理するサービスを作成します。それは簡単です。と呼びましょうSectionsService。次に、セクションを登録するディレクティブを作成します。section簡単にするためにそれを呼びましょう。ディレクティブはsection、DOM ノードの ID (一意性を確保するためにプログラムで作成される場合があります) をSectionsServiceリンク段階で に登録します。DOM は (ほとんどの場合) 順番に処理されるため、 に追加されるノードSectionsServiceも順番どおりになります。したがって、DOM は次のようになります (無関係なものは省略されています)。

<div section>...</div>

<!-- other stuff -->

<div section>...</div>

<!-- other stuff -->

<!-- etc. -->

（ここでは範囲外ですが、順序が問題にならないようにプログラムすることはそれほど難しくありませんが、私が知らないアプリの詳細に基づいています。）

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

以上です！非常に単純なディレクティブ、かなり単純なサービス、および必要なトリガーです。全体として、テストを含めて 100 行未満のコードだと思います。すべてのコンポーネントは分離されており、簡単にテストできますが、それでも非常にシンプルです。ビューは真実のままです。Angular Way は保持されます。

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

これがあなたを正しい方向に導くことを願っていますが、もちろんフォローアップの質問をしてください。必要に応じて、コードの詳細についてもお話しできます。私が言ったように、それらはそれほど複雑ではありません。

于 2013-04-04T04:59:45.787 に答える
2

AngularJS サービスはシングルトンであり、依存性注入を介して要求することができます。ディレクティブに状態マネージャー サービスを要求させ、インクリメンター/デクリメンターを呼び出すことができます。

別の方法として、$rootScope に配列を保持することもできます。これは、jquery セレクター グローバルよりも慣用的な「角度」ですが (それほど大きくはありません)、ウィジェット ライブラリを構築している場合はおそらく最適な方法ではありません。

于 2013-04-04T04:57:15.967 に答える