Menu
I want slotted transclusion, and I've seen examples of element directives like this:
<my-directive>
<slot-a></slot-a>
<slot-b></slot-b>
</my-directive>
I want to know if it must be an element directive. I'd like to do something like this:
<div my-directive>
<slot-a></slot-a>
<slot-b></slot-b>
</div>
Is this possible? I can't find any documentation saying it can or can't be done.
656
Apparently you can—at least in recent versions of AngularJS. The snippet below is a variation of the element directive in the multi-slot transclusion section.
(function(angular) {
'use strict';
angular.module('multiSlotTranscludeExample', [])
.directive('pane', function() {
return {
restrict: 'A',
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: '<div style="border: 1px solid black;">' +
'<div class="title" ng-transclude="title">Fallback Title</div>' +
'<div ng-transclude="body"></div>' +
'<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
'</div>'
};
})
.controller('ExampleController', ['$scope',
function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.link = 'https://google.com';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}
]);
})(window.angular);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="multiSlotTranscludeExample">
<style>
.title,
.footer {
background-color: gray
}
</style>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br/>
<textarea ng-model="text" aria-label="text"></textarea>
<br/>
<div pane>
<pane-title>
<a ng-href="{{link}}" ng-bind="title"></a>
</pane-title>
<pane-body>
<p ng-bind="text"></p>
</pane-body>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With