Comme mentionné, par exemple, si vous cliquez sur un bouton et qu'une liste déroulante apparaît à proximité, quelle serait la meilleure solution
Mon idée est similaire à la méthode traditionnelle. Écrivez d'abord la boîte contextuelle sur la page, masquez-la avec ng-if, affichez-la lorsque vous cliquez sur le bouton, puis modifiez la position de la boîte contextuelle en fonction. à l'emplacement du bouton cliquez, obtenez la position et modifiez la position Pas facile à obtenir.
Toute mon idée est une méthode traditionnelle, donc je voudrais demander, comment implémenter cette fonction en angulaire serait mieux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Merci pour l'invitation.
Il semble que l'interface que vous fournissez soit l'interface de worktile.
Le responsable de Worktile a en fait open source ce composant appelé angulaire-wt-pbox, et l'adresse github est https://github.com/WorktileTe...
Le pop- la boîte que vous voyez dans Worktile est la suivante
Il a également expliqué pourquoi ne pas utiliser la liste déroulante de ui-bootstrap
La liste déroulante de ui-bootstrap ne prend pas en charge la compilation dynamique de modèles et ne convient pas pour afficher des couches interactives complexes dans la liste
La position du calque pop-up est uniquement de haut en bas, il ne peut pas être ajusté à gauche et à droite ou automatiquement en fonction de la taille ou de la position du cadre
Il n'y a rien de mal avec votre idée. Généralement, en ng, le sale boulot impliquant les détails de l'interface utilisateur est effectué par des directives. Le bouton utilisé pour déclencher peut être encapsulé dans une directive, afin que vous puissiez obtenir ses coordonnées, sa longueur et sa largeur via des opérations DOM, puis distribuer des événements pour afficher le menu. De plus, si vous ne souhaitez pas les écrire séparément, vous pouvez également écrire le menu et le bouton ensemble, ce qui est plus facile à utiliser.
Parce que j'utilise bootstrap...
Voici un lien approximatif pour vous. L'idée est la même que la vôtre, encapsulation directive.
http://angular-ui.github.io/b...
Merci pour l'invitation
En l'absence de styles prêts à l'emploi, le mieux dans ce cas est de l'encapsuler dans une directive. Encapsulez ensemble le bouton cliqué et la liste affichée, puis positionnez-les directement via CSS dans la même directive. peut contrôler l'affichage et le masquage de la liste via une certaine variable.
Mais il existe désormais de nombreux plug-ins tiers pour anualr. Le plus couramment utilisé est probablement angulaire-bootstrap. Angular1 et angulaire2 ont tous deux un support de version correspondant. Mon projet actuel l'utilise également, qui fournit la pagination, les contrôles de temps, etc.
http://angular-ui.github.io/b...
Merci à tous. Je suis retourné étudier le code source de dropdown et de wt-pbox. J'ai l'impression de ne pas encore trop connaître Angular !