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 mentioned, for example, if you click a button and a drop-down box pops up near it, what would be a better solution

My idea is similar to the traditional method. First write the pop-up box on the page, hide it with ng-if, display it when the button is clicked, and then modify the position of the pop-up box according to the location of the button click, obtain the position and modify the position. Not easy to get.

My whole idea is a traditional method, so I would like to ask, how to implement this function in angular would be better

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!