angular.js - How does angular generate a pop-up box near the clicked element, similar to the worktile click pop-up drop-down box?

Question

As the title says, for example, if you click a button and a drop-down box pops up near it, what solution would be better? My idea is similar to the traditional method. First write the pop-up box on the page, hide it with ng-if, and then display it when the button is clicked. Then modify the position of the pop-up box according to the position of the clicked button, obtain the position and modify the position...

过去多啦不再A梦 · Answer

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

ui-bootstrap’s dropdown does not support dynamic compilation of templates and is not suitable for popping up complex interactive layers in the list
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

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

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

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

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!