TD n°4 : Directives

Prérequis :

Tous les exercices utilisent Bootstrap :

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

Créer une directive avec template (dans une fonction)
Définir le scope d'une directive
Utiliser la transclusion
Implémenter la méthode link
Utiliser $observe

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.

-- Test en ligne

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
Traiter des événements sur le DOM (close.bs.alert)
Passer des méthodes dans le scope

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

<bs-alert style="{{style}}" close-button="{{closeButton}}" on-close="close()">
    <strong>Well done!</strong> You successfully read this important alert message.
</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
Observer les modifications sur ngModel

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.