AngularJS je m'y mets !

Directives

Voyons à présent une propriété au nom compliqué : transclude. Sous ce terme hermétique se cache une fonctionnalité simple. Par défaut le morceau de HTML vient prendre la place du contenu présent et celui-ci disparaît. Des fois on veut le récupérer pour la placer à un endroit précis. c'est justement l'objectif de la transclusion :

    <div ng-app="monApplication">
	    <div monespace-directive1>Alfred</div>
	    <div monespace-directive2>Alfred</div>
	    <script>
		angular.module('monApplication', []).
	    	directive('monespaceDirective1', function () {
				return {
					template: "<p>Bonjour</p>",
				}
		    }).
	    	directive('monespaceDirective2', function () {
				return {
					template: "<p>Bonjour <span ng-transclude></span></p>",
					transclude: true
				}
		    });
	    </script>
    </div>
Alfred
Alfred

Voici le code résultant :

<div monespace-directive1=""><p>Bonjour</p></div>
<div monespace-directive2=""><p>Bonjour <span ng-transclude=""><span class="ng-scope">Alfred</span></span></p></div>

On utilise la déclaration ngTransclude pour positionner le contenu.

Précédent Suivant

Retour à l'accueil...