Transclusion is one of the most useful features when it comes to writing reusable Angular directives. Even if you never heard of what it is, you might have used transclusion before without knowing it. The version 1.5 of AngularJS adds a long awaited\u00a0feature: Multi Slot Transclusion, that allows us developer to build ever more flexible API’s for our directives.<\/p>\n
I’m not going through the whole concept of\u00a0transclusion, there are a lot of posts in the internet (see Chapter ‘Further Reading’) that cover this\u00a0topic.<\/p>\n
<\/p>\n
typically you would use transclusion to let the user of your directive insert his custom HTML into your directive.<\/p>\n
Given you have a markup such as the following:<\/p>\n
<list>\r\n <list-item title=\"Football\">is cool<\/list-item>\r\n <list-item title=\"Table Tennis\">rocks<\/list-item>\r\n <list-item title=\"Football Table\">is the best<\/list-item>\r\n<\/list><\/pre>\nand two directive definitions like<\/p>\n
app.directive('list', function() {\r\n return {\r\n restrict: 'AE',\r\n scope: {},\r\n transclude: true,\r\n replace: true,\r\n template: '<ul ng-transclude><\/ul>'\r\n }\r\n});\r\n\r\napp.directive('listItem', function() {\r\n return {\r\n restrict: 'AE',\r\n require: '^list',\r\n scope: {\r\n title: '@'\r\n },\r\n transclude: true,\r\n replace: true,\r\n template:'<li><\/span><b>{{title}}: <\/b><span ng-transclude><\/span><\/span><\/li>'\r\n } \r\n});<\/pre>\nThe two directives
list<\/code> andlist-item<\/code> render the following snippet:
\n