Qu'est-ce que ng-transclude?
J'ai vu un certain nombre de questions sur StackOverflow traiter de ng-transclude, mais aucune n’expliquait ce qu’il en était.
La description dans la documentation est la suivante:
Directive qui marque le point d'insertion pour le DOM transclus de la directive mère la plus proche qui utilise la transclusion.
C'est assez déroutant. Est-ce que quelqu'un pourrait expliquer en termes simples ce que ng-transclude est censé faire et où il pourrait être utilisé?
Transclude est un paramètre qui indique à angular de capturer tout ce qui est placé dans la directive dans le balisage et de l'utiliser quelque part.(Où en fait le ng-transclude est à) dans le modèle de la directive. En savoir plus à ce sujet sous Création d'une directive qui enveloppe d'autres éléments dans la section sur documentation des directives .
Si vous écrivez une directive personnalisée, utilisez ng-transclude dans le modèle de directive pour marquer le point où vous souhaitez insérer le contenu de l'élément.
angular.module('app', [])
.directive('hero', function () {
return {
restrict: 'E',
transclude: true,
scope: { name:'@' },
template: '<div>' +
'<div>{{name}}</div><br>' +
'<div ng-transclude></div>' +
'</div>'
};
});
Si vous mettez cela dans votre balisage
<hero name="superman">Stuff inside the custom directive</hero>
Cela se présenterait comme:
Superman
Stuff à l'intérieur de la directive personnalisée
Exemple complet:
Index.html
<body ng-app="myApp">
<div class="AAA">
<hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>
jscript.js
angular.module('myApp', []).directive('hero', function () {
return {
restrict: 'E',
transclude: true,
scope: { name:'@' },
template: '<div>' +
'<div>{{name}}</div><br>' +
'<div ng-transclude></div>' +
'</div>'
};
});
Output markup
Visualiser:
c'est une sorte de rendement, tout ce qui provient de element.html () est rendu ici, mais les attributs de la directive sont toujours visibles dans la portée donnée.