angular.js - angular如何在点击元素附近生成一个弹框，类似worktile点击弹出下拉框

Question

如题，比如点击一个按钮，在它附近弹出下拉框，怎样的方案会好些呢

我的思路是类似传统的方法，先在页面写好弹框，用ng-if隐藏，点击按钮的时候，显示，然后根据点击按钮的位置修改弹框的位置，获取位置和修改位置都不好获取。

我的思路整个方法都是传统的方法，所以想问下，在angular里怎样实现这个功能会比较好呢

Answer 1

お誘いありがとうございます。

あなたが提供するインターフェースはworktileのインターフェースのようです
Worktile公式は実際にangular-wt-pboxと呼ばれるこのコンポーネントをオープンソース化しており、githubアドレスはhttps://github.com/WorktileTe...です。 worktileにあるアップボックスはこれです

彼は、ui-bootstrap のドロップダウンを使用しない理由についても説明しました

1. ui-bootstrap のドロップダウンはテンプレートの動的なコンパイルをサポートしておらず、リスト内に複雑なインタラクティブなレイヤーをポップアップするのには適していません

2. ポップアップレイヤーの位置は上下のみで、枠の大きさや位置に合わせて左右や自動で調整することはできません

Answer 2

あなたのアイデアに何も問題はありません。ng では、UI の詳細に関わる汚い作業はディレクティブによって行われます。トリガーに使用されるボタンはディレクティブにカプセル化できるため、DOM 操作を通じてその座標、長さ、幅を取得し、メニューを表示するイベントを送信できます。さらに、それらを個別に記述したくない場合は、次のようにします。メニューとボタンを一緒に記述することもでき、操作が簡単になります。

Answer 3

ブートストラップを使用しているため...

ここに大まかなリンクがあります。アイデアはあなたのものと同じで、ディレクティブのカプセル化です。

http://angular-ui.github.io/b...

Answer 4

ご招待ありがとうございます

既製のスタイルがない場合、この場合の最善の方法は、クリックされたボタンと表示されたリストを一緒にディレクティブにカプセル化し、それらを同じディレクティブ内に直接カプセル化することです。特定の変数を通じてリストの表示と非表示を制御できます。

しかし現在、angualr 用のサードパーティ製プラグインが多数あります。最も一般的に使用されるのはおそらく angular-bootstrap です。angular1 と angular2 の両方に対応するバージョンがサポートされており、ページングや時間制御などを提供します。

http://angular-ui.github.io/b...

Answer 5

皆さん、ドロップダウンと wt-pbox のソースコードを勉強しに戻りました。私はまだ Angular に慣れていないように感じます。