Rédiger un dropdown Bootstrap simple pour AngularJS

Retour aux articles Dans #blog le 19/10/2015 par Emmanuel BALLERY

Rédiger un dropdown Bootstrap simple pour AngularJS

Quand une application AngularJS est aménée à grandir, il se pose rapidemment la question des performances. Une des étapes de cette chasse à l'alègement est la limitation des watchers. Très souvent, ces démons proviennent des plugins que l'on utilise, qui, pour offrir des fonctionnalités vastes et adaptées à tous les besoins, deviennent trop complexes pour l'usage simple que l'on en a. Combiné à des ng-repeat ces plugins peuvent devenir des gouffres de mémoire.

Mon exemple sera donc le dropdown de Bootstrap, très bien intégré dans une directive par l'équipe d'AngularUI :

https://angular-ui.github.io/bootstrap/#/dropdown

Usage d'un dropdown dans un ng-repeat
Intégration d'un dropdown dans un ng-repeat

Le fonctionnement par défaut crée naturellement des watchers. On peut voir notamment dans le code source du plugin des watchers sur des méthodes (éxécutés à chaque digest) et sur des attributs de scopes isolés :

En réalité, ces watchers vous permettent d'afficher les dropdowns depuis vos controllers, d'intercepter des événements d'ouverture/fermeture ... Ces usages sont rares. Si vous souhaitez une implémentation simple depuis la librairie CSS d'origine de Bootstrap et en utilisant jQuery (ou jQlite), il est possible de créer une directive basique qui ne coûtera aucun watcher.

L'usage est simple et limité à la fonctionnalité de base :

Vous pouvez le voir en action sur le Plunkr suivant :

http://plnkr.co/edit/HZum5LF13rkZoQ9d3LyR?p=preview

Retour aux articles