Hello there, I'm currently facing a unique situation that has me stumped. Is it possible to replace the content of a directive's root element with that of a nested (child) directive? Here is an example scenario:
<div id=”main”>
<nav>
<main-directive></main-directive>
</nav>
</div>
//mainDirective’s template
<div id=”mainDir>
<p>Hello World </p>
<child-directive></child-Directive>
</div>
//childDirective’s template
<div id=”childDir”>
<p>I conquered the world</p>
</div>
What I want to achieve is when an ng-click event occurs in mainDirective, the childDirective should appear over the mainDirective, replacing its position entirely. Then, upon clicking a back button, the childDirective should hide and the parent's root element will be shown again.
->mainDirective->onClick()->childDirective ->OnBackClick() ->mainDirective
I found a similar implementation on this source code, but my attempt using a simpler approach on Plunker didn't yield the same results. After going through it all meticulously, I am still unable to pinpoint where I might be going wrong.