Discussion :

[Alvaten]

Bonjour à tous,

Je galère un peu à l’élaboration d'une directive qui me permettrai de masquer un élément en fonction d'une condition (basé sur ng-show).
J'ai réussi à faire quelque chose de fonctionnel avec une directive de type "élément" mais dont le résultat (en terme de code HTML généré) ne me satisfait pas à 100%

Mon code qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
app.directive('maDirective', function() {
	var directive = {
		restrict: 'E',
		transclude: true,
		scope: {
			parameter: '@'
		},
		template: '<div ng-show="condition" ng-transclude></div>',
		link: function(scope) {
			var condition = false;
			//... plusieurs lignes de calculs complexes
			scope.condition = condition;
		}
	};
	return directive;
});

Quand j'utilise : <ma-directive parameter="XXX"><span class="uneClasse">Hello</span></ma-directive>
J'obtiens : <div ng-show="condition" ng-transclude><span class="uneClasse">Hello</span></div>

Je voudrai idéalement créer une directive de type "attribut" que je mettrai sur mon span pour éviter l'ajout de la div supplémentaire englobante (ou de toute autre balise) qui peux potentiellement affecter mon rendu visuel. En passant le restrict en 'A' et en l'appelant <span ma-directive data-parameter="XXX" class="uneClasse">Hello</span> je me retrouve logiquement avec une div interne cette fois. Je n'arrive pas à trouver une solution pour m'en passer complètement.

Est-ce possible de faire ce que je veux ou est-ce que je cherche dans le vide ou dans la mauvaise direction ?

En espérant avoir été clair sur mes explications, merci d'avance pour votre aide.

[Marco46]

une directive qui me permettrai de masquer un élément en fonction d'une condition (basé sur ng-show).

Ben tu as ng-hide qui existe déjà. Pourquoi en créer une autre qui fait pareil ?

[Alvaten]

Le truc c'est que le ng-hide et ng-show demandent une expression booléenne. Comme mon expression est assez complexe utilisant mon paramètre, je ne vais pas la mettre dans ma vue et comme c'est toujours la même je veux éviter de la copier-coller dans tous les contrôleurs appelant une vue qui l'utiliserai.

Edit : j'ai aussi fait une version en passant une fonction au ng-show, le résultat HTML correspond à mes attentes mais j'aimerai bien réussir à faire ma directive quand même

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<span ng-show="calculComplexe('XXX')">
Hello
</span>

[Marco46]

La bonne pratique c'est de ne mettre aucune condition dans les templates et de passer par des services.

Donc disons par exemple que dans une vue tu as un bloc dont l'affichage est conditionné par plusieurs règles métiers.

Tu écris un service pour tes règles métiers, un service pour gérer l'affichage des blocs de ta vue.

Dans ton service d'affichage des blocs de ta vue tu vas avoir une fonction "displayBlocToto" où toto est le bloc toto. Tu fais une fonction par bloc. Tu publies ce service dans le controller de ta vue. Dans "displayBlocToto" tu exécutes toutes les règles métiers que tu veux et tu finis par renvoyer un booléen.

Si tu veux réutiliser tes règles métiers dans d'autres vues, pas de soucis il suffit d'injecter les services au besoin.

Ce pattern a pour avantage d'être très facile à tester unitairement et il conserve le côté déclaratif de la vue.

[Alvaten]

Merci pour ces explications et ton aide ! J'ai pu résoudre mon problème.

J'ai encore du mal avec certain principes d'Angular et on m'a lancé sur un projet déjà bien en place, apprendre sur le tas c'est pas toujours évident.