Javascript 带子dom插槽的Angular 1.5组件模板

我正在尝试制作一个可重用的自包含angular 1.5组件，作为其他页面内容的包装器。更改值时，它将切换子内容。隐藏和显示内容的解决方案不是问题，而是如何制作一个可重用的组件，该组件可以处理将子组件注入组件模板而不是重写模板

page.html

<div class="some page">
   <my-cmp value="false">
      <p>this static content is toggled by my-cmp</p>
      <div>more stuff</div>
      <ul>
         <li>no limits</li>
      </ul>
   </my-cmp>
</div>

<div class="my-cmp">
   <div ng-if="showContent">
      <!--child content should be inserted here by the component -->
      <!-- how do i tell the my-cmp template i want child elements injected here? -->
      <!-- this is the only part i'm missing -->
   </div>
   <div ng-if="!showContent">
      <h1>Content is hidden</h1>
      <button>Show content</button>
   </div>
</div>  

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude>
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!hideContent">
       <h1>Content is hidden</h1>
       <button>Show content</button>
    </div>
</div>

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude> <!-- ng-show="showContent" -->
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!showContent"> <!-- ng-hide="!showContent" -->
        <h1>Content is hidden</h1>
        <button type="button" ng-click="showHiddenContent()">Show content</button>
    </div>
</div>

此静态内容由我的cmp切换

更多的东西

无限制

更改值时，组件应更改页面上的内容。

<div class="some page">
   <my-cmp value="true">
      <div>
         <h1>Content is hidden</h1>
         <button>Show content</button>
      </div>
   </my-cmp>
</div>

内容是隐藏的
显示内容

我一直在阅读angular 1.5文档，没有发现任何这样的例子。我遇到的问题是，子内容在我的组件模板中过度写入了内容，我无法告诉组件放置子内容的确切位置。组件应能够在两种状态之间自由切换

my cmp.html

<div class="some page">
   <my-cmp value="false">
      <p>this static content is toggled by my-cmp</p>
      <div>more stuff</div>
      <ul>
         <li>no limits</li>
      </ul>
   </my-cmp>
</div>

<div class="my-cmp">
   <div ng-if="showContent">
      <!--child content should be inserted here by the component -->
      <!-- how do i tell the my-cmp template i want child elements injected here? -->
      <!-- this is the only part i'm missing -->
   </div>
   <div ng-if="!showContent">
      <h1>Content is hidden</h1>
      <button>Show content</button>
   </div>
</div>  

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude>
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!hideContent">
       <h1>Content is hidden</h1>
       <button>Show content</button>
    </div>
</div>

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude> <!-- ng-show="showContent" -->
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!showContent"> <!-- ng-hide="!showContent" -->
        <h1>Content is hidden</h1>
        <button type="button" ng-click="showHiddenContent()">Show content</button>
    </div>
</div>

内容是隐藏的
显示内容

我设法找到了一些显示如何执行此操作的旧文档。组件中的

transclude:true，

是必需的

我的cmp.js

(function() {
    angular.module("app").component("my-cmp", {
        templateUrl: "views/tmpl/components/my-cmp.html",
        controller: [myCmp],
        restrict: 'E',
        transclude: true,
        binding: {
            show: '<',
        }
    });

    function myCmp() {...}
})();

（函数（）{
角度模块（“应用”）组件（“我的cmp”{
templateUrl：“views/tmpl/components/my cmp.html”，
控制器：[myCmp]，
限制：'E'，
是的，
绑定：{
秀：'
在HTML中：

<div class="some-page">
    <my-cmp show-content="isHidden">
        <p>this static content is toggled by my-cmp</p>
        <div>more stuff</div>
        <ul>
            <li>no limits</li>
        </ul>
    </my-cmp>
</div>


此静态内容由我的cmp切换

更多的东西

无限制


my cmp.html

<div class="some page">
   <my-cmp value="false">
      <p>this static content is toggled by my-cmp</p>
      <div>more stuff</div>
      <ul>
         <li>no limits</li>
      </ul>
   </my-cmp>
</div>

<div class="my-cmp">
   <div ng-if="showContent">
      <!--child content should be inserted here by the component -->
      <!-- how do i tell the my-cmp template i want child elements injected here? -->
      <!-- this is the only part i'm missing -->
   </div>
   <div ng-if="!showContent">
      <h1>Content is hidden</h1>
      <button>Show content</button>
   </div>
</div>  

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude>
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!hideContent">
       <h1>Content is hidden</h1>
       <button>Show content</button>
    </div>
</div>

<div class="my-cmp">
    <div class="content" ng-if="showContent" ng-transclude> <!-- ng-show="showContent" -->
        <!-- content is added by children passed in -->
    </div>
    <div ng-if="!showContent"> <!-- ng-hide="!showContent" -->
        <h1>Content is hidden</h1>
        <button type="button" ng-click="showHiddenContent()">Show content</button>
    </div>
</div>


内容是隐藏的
显示内容
不使用指令的原因是什么？我不熟悉您提供的angular 1.5 below解决方案，应该可以工作-有关更多详细信息，请查看此链接-