Différences

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

--- web:javascript:angularjs:directives [2014/12/03 21:53] – créée sgariepy
+++ web:javascript:angularjs:directives [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Directives ======
-===== Types de bindings =====
+Les directives sont une façon de donner de nouvelles fonctionnalités au HTML.
+Il y a quatre types de directives:
+  * E - Élement -> ''<sg-element />''.
+  * A - Attribut -> ''%%<div sg-element></div>%%''.
+  * C - Classe -> ''%%<div class="sg-directive"></div>%%''.
+  * M - Comment -> ''<!-- directive: my-directive exp -->''.
+Généralement seulement les types **E** et **A** sont utilisés.
+Il est conseillé de préfixer les directives que l'on crée.  Angular a préfixé ses directives avec ''ng-'', on peut choisir tout autre combinaison, exemple ''sg-nom-de-la-directive''.
+===== Support de IE =====
+Pour supporter les vieilles versions de IE, il faut utiliser des directives de type attribut.  Aussi, utiliser le [[wp>Polyfill|Polyfill]] JSON.stringify.
+====== Types de bindings ======
 ^ Symbol  ^ Utilisation  ^
-| ''@''  | Lecture seule  |
+|  ''@''  | Lecture seule  |
-| ''=''  | Lecture/écriture (//two-way binding//)  |
+|  ''=''  | Lecture/écriture (//two-way binding//)  |
-| ''&''  | Method Binding  |
+|  ''&''  | Method Binding  |
+Dans le binding ''='', on peut utiliser ''=?''((https://github.com/angular/angular.js/pull/1889)) pour le rendre optionel.
+====== Scope ======
+=== Scope d'un élément ===
+Dans une directive, on peut avoir accès au scope d'un élément (autre au scope de la directive elle-même, mais un élément tout de même à l'intérieur de celle-ci).
+<code javascript>
+element.on('click', 'input', function(event) {
+    var inputScope = angular.element(this).scope();
+});
+</code>
+====== Exemples de directives ======
+==== Pourcent ====
+<code javascript>
+myApp.directive("percent", function($filter){
+    var p = function(viewValue){
+        var m = viewValue.match(/^(\d+)\/(\d+)/);
+        if (m != null)
+          return $filter('number')(parseInt(m[1])/parseInt(m[2]), 2);
+        return $filter('number')(parseFloat(viewValue)/100, 5);
+    };
+    var f = function(modelValue){
+        return $filter('number')(parseFloat(modelValue)*100, 2);
+    };
+    return {
+        require: 'ngModel',
+        link: function(scope, ele, attr, ctrl){
+            ctrl.$parsers.unshift(p);
+            ctrl.$formatters.unshift(f);
+        }
+    };
+});
+</code>
+Source : [[http://jsfiddle.net/abhaga/DdeCZ/18/|JSFiddle]]
+====== À lire ======
+  * [[http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/|The nitty-gritty of compile and link functions inside AngularJS directives]]
+  * [[https://nulogy.com/articles/transclusion-in-angular|Transclusion in Angular]]
+  * [[https://docs.angularjs.org/api/ng/service/$compile|$compile]]