TD n°4 : Directives

Prérequis :

Tous les exercices utilisent Bootstrap :

-- Exercice : Buttons

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

-- Objectifs

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

-- Fonctionnalités

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>

-- Tests

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

-- Test en ligne

-- Exercice : Alert

Il s'agit de reproduire les Alerts Bootstrap

-- Objectifs

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

-- Fonctionnalité

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>

-- Tests

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

-- Exercice : Progressbar

Il s'agit de reproduire la Progressbar Bootstrap

-- Objectifs

Créer une directive avec template
Définir le scope d'une directive
Utiliser la méthode link
Observer les modifications sur ngModel

-- Fonctionnalité

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>

-- Tests

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