Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:angularjs:td4 [2015/02/20 18:19] – [1- Exercice : Buttons] jcheron
+++ slam4:richclient:angularjs:td4 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 22: / Ligne 22: @@
 {{:slam4:richclient:angularjs:allbsbuttons.png?nolink|}}
 ==== -- Objectifs ====
-  * Créer une directive avec template
+  * 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é ====
+==== -- Fonctionnalités ====
-Créer une directive permettant de créer un bouton Bootstrap.
+Créer une directive permettant de créer un bouton Bootstrap.\\
 La directive pourra être utilisée de la manière suivante :
 <sxh html;gutter:false>
-<bs-button data-ng-click="console.log('click')" style="{{style}}">Bouton cliquable</bs-button>
+<bs-button data-ng-click="console.log('click')" style="{{style}}">
+    Bouton cliquable
+</bs-button>
 </sxh>
 <sxh html;gutter:false>
-<bs-button style="primary" size="sm" disabled>Small Bouton disabled</bs-button>
+<bs-button style="{{style}}" glyphicon="{{glyph}}" data-active="{{active}}" data-disabled="{{disabled}}">
+    {{value}}
+</bs-button>
 </sxh>
@@ Ligne 42: / Ligne 49: @@
 Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.
+{{:slam4:richclient:angularjs:exdirbuttons.png?800|}}
+=== -- Test en ligne ===
+<html><a target="_new" href="http://angular.kobject.net/ex7"><button style="width:400px" class="btn">Tester les boutons</button></a></html>
 ===== -- Exercice : Alert =====
 Il s'agit de reproduire les [[http://getbootstrap.com/components/#alerts|Alerts Bootstrap]]
@@ Ligne 50: / Ligne 64: @@
   * 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é ====
@@ Ligne 57: / Ligne 73: @@
 <sxh html;gutter:false>
-<div bs-alert data-bs-style="warning"><strong>Well done!</strong> You successfully read this important alert message.</div>
+<bs-alert style="{{style}}" close-button="{{closeButton}}" on-close="close()">
-</sxh>
+    <strong>Well done!</strong> You successfully read this important alert message.
+</bs-alert>
-<sxh html;gutter:false>
-<bs-alert data-bs-style="danger" data-close="true"><strong>Warning!</strong> Better check yourself, you're not looking too good.</bs-alert>
 </sxh>
@@ Ligne 67: / Ligne 81: @@
 Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.
+{{:slam4:richclient:angularjs:exdiralert.png?700|}}
+<html><a target="_new" href="http://angular.kobject.net/ex8"><button style="width:400px" class="btn">Tester les Alerts</button></a></html>
 ===== -- Exercice : Progressbar =====
@@ Ligne 77: / Ligne 95: @@
   * Définir le scope d'une directive
   * Utiliser la méthode link
+  * Observer les modifications sur ngModel
 ==== -- Fonctionnalité ====
@@ Ligne 94: / Ligne 113: @@
 {{:slam4:richclient:angularjs:exdirprogressbar.png?800|}}
+<html><a target="_new" href="http://angular.kobject.net/ex9"><button style="width:400px" class="btn">Tester les Progressbars</button></a></html>