Index.html:
<nav-wrapper title="Email Test">
<nav-elem value="first"></nav-elem>
<nav-elem value="second"></nav-elem>
</nav-wrapper>
app.js:
app.directive('navWrapper', function() {
return {
restrict: 'E',
replace: true,
scope: {
title: "@"
},
template: '<div class="wrapper"><p class="title">{{::title}}</p><ul>'
}
});
app.directive('navElem', function() {
return {
restrict: 'E',
replace: true,
scope: {
value: "@?"
},
template: '<li class="navElem">{{::value}}</li>'
}
});
output:
<div class="wrapper">
<p class="title">Email Test</p>
<ul></ul>
</div>
desired output:
<div class="wrapper">
<p class="title">Email Test</p>
<ul>
<li class="navElem">first</li>
<li class="navElem">second</li>
</ul>
</div>
Currently all tags in directive navWrapper are closed before the navElems are shown. Is there a way to tell 'navWrapper' including all child elements before the closing 'ul div' to reach the desired output?