TD n°4 : Directives

Ceci est une ancienne révision du document !

Prérequis :

Tous les exercices utilisent Bootstrap :

Créer une directive avec template
Définir le scope d'une directive

Créer une directive permettant de créer un bouton Bootstrap. La directive pourra être utilisée de la manière suivante :

<bs-button data-ng-click="console.log('click')" style="primary">Bouton cliquable</bs-button>

<bs-button style="primary" size="sm" disabled>Small Bouton disabled</bs-button>

Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.

Créer une directive avec template
Définir le scope d'une directive
Utiliser la méthode link

Créer une directive bsAlert permettant de créer une zone Alert Bootstrap. La directive pourra être utilisée de la manière suivante :

<div bs-alert data-bs-style="warning"><strong>Well done!</strong> You successfully read this important alert message.</div>

<bs-alert data-bs-style="danger" data-close="true"><strong>Warning!</strong> Better check yourself, you're not looking too good.</bs-alert>

Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.

Créer une directive avec template
Définir le scope d'une directive
Utiliser la méthode link

Créer une directive bsProgressBar permettant de créer une zone Progressbar Bootstrap. La directive pourra être utilisée de la manière suivante :

<bs-progress-bar min="0" max="100" value="50" 
    data-style="success"
    data-effect="striped"
    data-on-start="showStart()" 
    data-on-progress="showProgression()" 
    data-on-terminated="showTerminated()" 
    data-caption-mask="value%"/>

Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.