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>

我实际上想做的是，当我在mainDirective中应用ng-click时，childDirective出现在mainDirective上方，替换了div所在的位置，因此在这种情况下
 将被childDirective的根元素替换为
附带一提，当我单击“后退”按钮时，childDirective隐藏，并且再次显示父级的根元素。

-> mainDirective-> onClick（）-> childDirective-> OnBackClick（）-> mainDirective

一个发生这种情况的例子是从这里开始的，我正在实现类似的东西，但是我得到的结果与本源代码中的结果不同，并且在将其全部分解后，我看不到我的错。

https://github.com/wuxiaoying/angular-multilevelpushmenu
我尝试一个简单得多的水平
plunker

最佳答案

因此，您实际上可以使用简单的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>

所以做一个函数来替换div childcontent中的内容，childDir的内容

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

问候