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

Question

您好，我目前处于无法在任何地方找到解决方案的情况，

我想知道如何以及是否可以将指令根元素的内容替换为从嵌套(子)指令声明的内容。

<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

Answer 1

所以你实际上可以使用简单的 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;
}

问候