Javascript 嵌套的子指令根元素如何在父指令根元素的同一级别上工作？

您好，我目前的情况是，我在任何地方都找不到解决方案

我想知道如何以及是否可以用嵌套子指令声明的内容替换指令根元素的内容

<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>

我实际上想做的是，当我从main指令应用ng单击时，childDirective出现在main指令上，在本例中，替换div所在的位置 将替换为正在执行的ChildDirection的根元素 在旁注中，当我单击“上一步”按钮时，childDirective将隐藏，父元素的根元素将再次显示

->mainDirective->onClick->childDirective->OnBackClick->mainDirective

发生这种情况的一个例子是从这里开始的，我正在实现一些类似的东西，但是我没有得到与此源代码相同的结果，在将其全部分解之后，我看不出我有什么错误

我尝试在一个更简单的层次

---

因此您可以实际使用简单的JavaScript命令：

//mainDirective’s template
<div id=”mainDir>
  <p>Hello World </p>
  <div id="childcontent"></div> 
// This is the new DIV where the Content of the childDir div will be after clicking the button.
</div>

//childDirective’s template
<div id=”childDir”>
  <p>I conquered the world</p>
</div>

问候

function replacecontent()
{
    document.getElementById('childcontent').innerHTML = document.getElementById('childDir').innerHTML;
}