I'm trying to do the following:
If I add <my-custom-directive></<my-custom-directive>
it should expand to
<div class="my-custom-container">
<label class="my-custom-label">Fallback</label>
<input class="my-custom-input"/>
</div>
which can be done by setting the above as template and replace:true in DDO.
If I add the following in HTML:
<my-custom-directive>
<my-custom-label class="users-custom-class"><span>Custom content</span><my-custom-label>
</<my-custom-directive>
it should expand to
<div class="my-custom-container">
<label class="my-custom-label users-custom-class"><span>Custom content</span></label>
<input class="my-custom-input"/>
</div>
Which means if the user wants to provide custom <label>, <input> etc, we use transclusion, and the transcluded content replaces respective slot in the original template, similar to how a replace:true directives's would replace itself with it's template.
I'm not able to combine the replace and transclusion functionality.
What I've so far (something-working-state) is the following:
angular.module('test', [])
.directive('transTest', function() {
return {
transclude: {
lab: '?labelTest',
inp: '?inputTest'
},
replace: true,
template: '<div class="container"><label ng-transclude="lab">Fallbacl label</label><input type="text" placeholder="fallback" ng-transclude="inp"></div>',
link: function(scope, element, attrs, ctrl, transclude) {
console.log(transclude())
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<div ng-app="test">
<div trans-test class="test">
<label-test>test label</label-test>
<input-test>test input</input-test>
</div>
</div>
As you can see, the trancluded content goes inside the translude containing element, instead of replacing it. I've read the source code comments, articles and also checked the implementation of ui-bootstrap-accordion and tried my luck with transclude:'element', but it leaves nothing in DOM but a comment.
transclusion, replace etc are the available options that I've found which offers functionality similar to what I'm trying to achieve. But they don't seem to play well toghether. What is the correct way to achieve this kind of functionality in angular, if possible..?