AngularJS je m'y mets !

Directives

Nous allons nous intéresser maintenant au nom de la directive. J'ai déjà évoqué ce sujet précédemment en signalant qu'AngularJS supporte plusieurs syntaxes selon le validateur qu'on vise. Voici un tableau qui résume la situation :

Syntaxe selon le validateur
Validateur Syntaxe Exemple
Aucun espace_de_nom-nom ng-app
XML espace_de_nom:om ng:app
HTML5 data-espace_de_nom-nom data-ng-app
xHTML x-espace_de_nom-nom x-ng-app

J'ai surligné la validation HTML5 qui est la plus indiquée mais vous avez le choix. Ce qu'il faut savoir par contre c'est que du coup AngularJS nomme les directives en camelCase, à vous de les transformer selon votre choix. Il existe une autre syntaxe : ng_app.

Dans notre exemple j'avais mis le nom de la directive tout en minuscules pour ne pas être confronté directement à cette question. Mais ce n'est pas une approche judicieuse parce que du coup la directive n'est pas placée dans un espace de nom particulier. On va arranger ça maintenant :

<div ng-app="monApplication">
	<div data-monespace-directive></div>
	<script>
		angular.module('monApplication', []).
		directive('monespaceDirective', function () {
			return {
				template: "<p> Je suis une directive qui 'affiche ! </p>"
			}
		});
	</script>
</div>

Ma directive s'appelle monespaceDirective. Ce qui signifie que l'espace de noms est monespace et le nom de la directive directive. Pour une validation HTML5 je me retrouve donc avec l'appellation data-monespace-directive.

Précédent Suivant

Retour à l'accueil...