TD n°4 : Directives

Ceci est une ancienne révision du document !

Prérequis :

Tous les exercices utilisent Bootstrap :

Il s'agit de reproduire les Buttons Bootstrap à partir d'AngularJS.

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="{{style}}">Bouton cliquable</bs-button>

<bs-button style="{{style}}" glyphicon="{{glyph}}" data-active="{{active}}" data-disabled="{{disabled}}">{{value}}</bs-button>

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

Il s'agit de reproduire les Alerts Bootstrap

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.

Il s'agit de reproduire la Progressbar Bootstrap

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 data-ng-model="value" max="{{max}}" min="{{min}}" style="{{style}}" striped="{{striped}}" active="{{active}}" 
	on-terminated="onTerminated()" on-progress="onProgress()" on-start="onStart()">
</bs-progress-bar>

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