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

Question

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

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

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

Answer 1

Thanks for the invitation.

It seems that the interface you provide is the interface of worktile
Worktile official actually open sourced this component called angular-wt-pbox, the github address is https://github.com/WorktileTe...
The pop-up box you see in worktile is this

He also explained why not to use ui-bootstrap’s dropdown

1. ui-bootstrap’s dropdown does not support dynamic compilation of templates and is not suitable for popping up complex interactive layers in the list

2. The position of the pop-up layer is only up and down, it cannot be adjusted left and right or automatically according to the size or position of the frame

Answer 2

There is nothing wrong with your idea. Generally in ng, the dirty work involving UI details is done by directives. The button used to trigger can be encapsulated into a directive, so that you can obtain its coordinates, length and width through DOM operations, and then dispatch events to show the menu. In addition, if you don't want to write them separately, you can also write the menu and the button together, which is easier to operate. .

Answer 3

Because I have been using bootstrap...

Here is a rough link for you. The idea is the same as yours, directive encapsulation.

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

Answer 4

Thanks for the invitation

In the absence of ready-made styles, the best way to encapsulate this situation is to encapsulate it into a directive. Encapsulate the clicked button and the displayed list together, and then position them directly through CSS. Encapsulate them in the same directive. You can control the display and hiding of the list through a certain variable.

But now there are many third-party plug-ins for angualr. The most commonly used one is probably angular-bootstrap. Both angular1 and angular2 have corresponding version support. My current project also uses it, which provides paging, time controls, etc.

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

Answer 5

Thank you everyone. I went back to study the source code of dropdown and wt-pbox. I feel that I am still too unfamiliar with Angular!