slam4:richclient:angularjs:directives

Différences

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

Lien vers cette vue comparative

slam4:richclient:angularjs:directives [2015/01/06 14:21] – [Link/compile] jcheronslam4:richclient:angularjs:directives [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 44: Ligne 44:
 |**[[https://docs.angularjs.org/api/ng/directive/ngClick|ng-click]]** |  A  | <sxh html;gutter: false><div ng-click="jsExpression">...</div></sxh> | Associe un comportement au click sur l'élément $event correspond à l'objet event généré | |**[[https://docs.angularjs.org/api/ng/directive/ngClick|ng-click]]** |  A  | <sxh html;gutter: false><div ng-click="jsExpression">...</div></sxh> | Associe un comportement au click sur l'élément $event correspond à l'objet event généré |
 |**[[https://docs.angularjs.org/api/ng/directive/ngShow|ng-show]]** |  A  | <sxh html;gutter: false><div ng-show="booleanJsExpression">...</div></sxh> | Affiche ou masque l'élément associé | |**[[https://docs.angularjs.org/api/ng/directive/ngShow|ng-show]]** |  A  | <sxh html;gutter: false><div ng-show="booleanJsExpression">...</div></sxh> | Affiche ou masque l'élément associé |
-|**[[https://docs.angularjs.org/api/ng/directive/ngClick|ng-hide]]** |  A  | <sxh html;gutter: false><div ng-hide="booleanJsExpression">...</div></sxh> | Masque ou affiche l'élément associé | +|**[[https://docs.angularjs.org/api/ng/directive/ngHide|ng-hide]]** |  A  | <sxh html;gutter: false><div ng-hide="booleanJsExpression">...</div></sxh> | Masque ou affiche l'élément associé | 
- +|**[[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]]** |  A  | <sxh html;gutter: false><div ng-class="String, Array, Map or condition">...</div></sxh> | Modifie de manière conditionnelle la classe de l"élément associé | 
-ng-click, ng-show,ng-hide, ng-class, +|**[[https://docs.angularjs.org/api/ng/directive/ngSubmit|ng-submit]]** |  A  | <sxh html;gutter: false><form ng-submit="function()">...</div></sxh> | Soumet le formulaire associé |
-ng-submit +
- +
-===== Création de directives ===== +
-Quels intérêts ? +
- +
-  * Etendre le HTML et lui attribuer une logique métier +
-  * Factoriser le code, permettre la réutilisation +
- +
- +
-==== Directive simple & template ==== +
- +
-<sxh javascript;title:app.js> +
-var app = angular.module('testDirectivesApp', []) +
-.controller('Controller', ['$scope', function($scope) { +
-  $scope.client = { +
-    nom: 'SMITH', +
-    prenom: 'John' +
-  }; +
-}]); +
- +
-app.directive('myClient', function() { +
-  return { +
-    template: 'Nom : {{client.nom}} Prénom : {{client.prenom}}' +
-  }; +
-}); +
-</sxh> +
- +
-**Utilisations possibles :** +
- +
-<sxh html;title:test.html> +
-<html data-ng-app="testDirectivesApp" data-ng-controller="Controller"> +
-... +
- <my-client></my-client> +
- <div my-client></div> +
-</sxh> +
- +
-**Résultat :** +
- +
-{{:slam4:richclient:angularjs:dirresult1.png?nolink|}} +
- +
-==== templateUrl ==== +
-Excepté pour les petits templates, il est préférable d'utiliser un fichier template séparé en affectant la propriété **templateUrl** (notamment pour éviter les problèmes de quote/guillemets ) : +
-<sxh javascript;title:app.js> +
-app.directive('myClient', function() { +
-  return { +
-    templateUrl: 'my-client.html' +
-  }; +
-}); +
-</sxh> +
- +
-<sxh html;title:my-client.html> +
-Nom : {{client.nom}} Prénom : {{client.prenom}} +
-</sxh> +
- +
-La propriété templateUrl peut-être définie par une fonction : +
- +
-<sxh javascript;title:app.js> +
-app.directive('myClient', function() { +
-  return { +
-    templateUrl: function(elem, attr){ +
-      return 'client-'+attr.type+'.html'; +
-    } +
-  }; +
-}); +
-</sxh> +
- +
-**Templates :** +
-<sxh html;title:client-nom.html> +
-Nom : {{client.nom}} Prénom : {{client.prenom}} +
-</sxh> +
- +
-<sxh html;title:client-adresse.html> +
-Adresse: {{client.adresse}}<br> +
-CP: {{client.cp}} {{client.ville}} +
-</sxh> +
- +
-**Utilisation :** +
-<sxh html;title:tests.html> +
-<html data-ng-app="testDirectivesApp" data-ng-controller="Controller"> +
-... +
- <div myclient type="nom"></div> +
- <div my-client type="adresse"></div> +
-</sxh> +
-==== restrict ==== +
-La propriété **restrict** permet de définir le type de directive à créer ; restrict peut prendre les valeurs suivantes :  +
-  * éléments - **E** +
-  * attributs - **A** +
-  * classe Css - **C** +
-  * commentaire - **M** +
-  * ou une combinaison de ces valeurs : **EA** par exemple, pour élément et attribut +
- +
-Si la directive est définie sur 1 élément : +
-<sxh javascript;title:app.js;highlight:3> +
-app.directive('myClient', function() { +
-  return { +
-    restrict: 'E', +
-    templateUrl: function(elem, attr){ +
-      return 'client-'+attr.type+'.html'; +
-    } +
-  }; +
-}); +
-</sxh> +
- +
-Seule la première ligne sera compilée par Angular, la seconde sera ignorée : +
-<sxh html;title:tests.html> +
-<html data-ng-app="testDirectivesApp" data-ng-controller="Controller"> +
-... +
- <my-client type="nom"></my-client> +
- <div my-client type="adresse"></div> +
-</sxh> +
- +
-==== scope ==== +
-Le scope défini la portée d'une directive. Sans précision, le scope d'une directive est le scope de son contrôleur parent. Ce qui explique que notre directive ait pu accéder à la variable **client** de **Controller**. +
- +
-=== Isolation === +
-La directive précédemment créée a  un défaut : elle dépend du contrôleur dans laquelle elle a été définie, et si nous souhaitons afficher un autre client, il faut définir un autre contrôleur...\\ +
-La définition de la variable scope de la directive permet de résoudre ce problème : +
- +
- +
-**scope:{}** +
-Défini à {}, la directive a un scope qui lui est propre, différent de celui du controller auquel elle appartient : +
-<sxh javascript;title:app.js;highlight:4> +
-app.directive('myClient', function() { +
-  return { +
-    restrict: 'AE', +
-    scope:{}, +
-    templateUrl: function(elem, attr){ +
-      return 'client-'+attr.type+'.html'; +
-    } +
-  }; +
-}); +
-</sxh> +
- +
-Avec ce scope isolé, la directive ne peut plus accéder à la variable client définie dans le scope du controller : tester la page tests.html +
- +
-Nous allons ajouter une propriété permettant d'initialiser la directive, et lui affecter la personne à afficher : +
- +
-<sxh html;title:tests.html> +
-<html data-ng-app="testDirectivesApp" data-ng-controller="Controller"> +
-... +
- <my-client type="nom" personne="client"></my-client> +
- <my-client type="adresse" personne="client"></my-client> +
-</sxh> +
- +
-<sxh javascript;title:app.js;highlight:4> +
-app.directive('myClient', function() { +
- return{ +
- restrict:'EA', +
- scope:{client:"=personne"}, +
- templateUrl: function(elem, attr){ +
- return 'client-'+attr.type+'.html'; +
- } +
- } +
-}); +
-</sxh> +
- +
-L'attribut **personne** "bind" vers la variable **client** utilisée dans le scope de la directive. +
- +
-Lorsqu'un attribut a le même nom que la variable du scope auquel il est associé, on peut utiliser la notation :\\ +
-<sxh javascript;gutter:false> +
-scope : {attributeName: "="} +
-</sxh> +
- +
-Pour résumer (rapidement...) : +
- +
-^Valeurs de scope ^Résultats ^ +
-| false ou non définie  | pas de scope | +
-| {}  | scope isolé | +
-| {attributeName:"="}  | scope isolé, avec passage d'un attribut de type **expression valeur** du même nom | +
-| {attributeNameInDirectiveScope:"=attributeName"}  | scope isolé, avec passage d'un attribut de type **expression valeur** de nom différent | +
-| {attributeName:"@"}  | scope isolé, avec passage d'un attribut de type **texte** du même nom | +
-| {attributeNameInDirectiveScope:"@attributeName"}  | scope isolé, avec passage d'un attribut de type **texte** de nom différent | +
-| {attributeName:"&"}  | scope isolé, avec passage d'un attribut de type **expression action** du même nom | +
-| {attributeNameInDirectiveScope:"&attributeName"}  | scope isolé, avec passage d'un attribut de type **expression action** de nom différent | +
-| true | scope non isolé | +
- +
-**Exemple de passage d'une expression action (ng-click) :** +
-<sxh html;title:tests.html> +
- <my-client type="nom" personne="client" ng-click="client.adresse=''"></my-client> +
- <div my-client type="adresse" personne="client"></div> +
-</sxh> +
- +
-Sur click du nom, l'adresse doit être vidée. +
- +
-En l'état actuel du code, la directive ng-click n'est pas opérationnelle, il faut la passer à notre directive : +
-<sxh javascript;title:app.js;highlight:4> +
-app.directive('myClient', function() { +
- return{ +
- restrict:'EA', +
- scope:{client:"=personne",onClick:"&ngClick"}, +
- templateUrl: function(elem, attr){ +
- return 'client-'+attr.type+'.html'; +
- } +
- } +
-}); +
-</sxh> +
- +
-et la déclencher à nouveau dans le template : +
-<sxh html;title:client-nom.html> +
-<p ng-click="onClick">Nom : {{client.nom}} Prénom : {{client.prenom}}</p> +
-</sxh> +
- +
-==== Link/compile ==== +
- +
-Lorsqu'il analyse une directive appelée dans une page et la traduit en un ensemble d'éléments DOM, AngularJS compile la directive en faisant appel aux fonctions suivantes, dans un ordre déterminé : +
-  - compile +
-  - controller +
-  - pre-link +
-  - post-link +
-Si une directive doit modifier ou créer le DOM d'un template défini dans une directive, elle doit donc définir certaines de ces fonctions. +
- +
-=== Exemple === +
- +
-Soit la directive SoldeDir, dont les fonctionnalités sont les suivantes : +
-  * Affichage d'une valeur numérique (attribut montant), éventuellement en gras (attribut bold) +
-  * Si le montant est positif, il est affiché en <fc #008000>**vert**</fc> +
-  * S'il est négatif, en <fc #FF0000>**rouge**</fc>, précédé de la mention **Montant négatif** +
- +
-<sxh javascript;title:Exemple> +
-app.directive('soldeDir', function() { +
- return { +
- restrict : 'EA', +
- scope:{montant:"="}, +
- compile : function(tElem, tAttrs) { +
- if (tAttrs.bold == "true") +
- tElem.css("font-weight","bold"); +
- else +
- tElem.css("font-weight","normal"); +
-            var linkFunction = function($scope, tElem, tAttrs) { +
-            var update=function(){ +
-             if($scope.montant<0){ +
-             tElem.html("Solde négatif : " + $scope.montant); +
-             tElem.css("color", "red"); +
-             }else{ +
-             tElem.html($scope.montant); +
-             tElem.css("color", "green"); +
-             } +
-            } +
-            update(); +
-            } +
-            return linkFunction; +
- } +
- } +
-}); +
-</sxh> +
- +
- +
-<sxh html;title:Test soldDir> +
- <div ng-init="valeur=-5"> +
- <input type="text" ng-model="valeur"> +
- <solde-dir bold="true" montant="valeur"></solde-dir> +
-</sxh> +
- +
-{{:slam4:richclient:angularjs:dirresult2.png?|}}+
  • slam4/richclient/angularjs/directives.1420550468.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)