带有用于 child-dom 的插槽的 Angular 1.5 组件模板

Question

I'm attempting to make a reusable self contained angular 1.5 component that acts as a wrapper for other page content. When a value is changed it will toggle the child content. The solution of hiding and showing content is not in question but how to make a reusable component that can handle injecting the children into the components template and not over write the template.

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>

When value is changed the component should change the content on the page.

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

I have been reading the angular 1.5 docs and haven't found any example that does this. The problem i'm having is that the child content is over writing the content in my components template and i have no way of telling the component the exact spot to place the child content. The component should be able to switch between the two states freely.

my-cmp.html

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

Answer 1

I managed to find some old documents showing how to do this. the transclude: true, in the component is needed.

my-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() {...}
})();

my-cmp.html

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

adding ng-transclude as an attribute to the element that is the target, will tell angular to inject the child DOM elements in this spot and not over write your template.

Answer 2

(function() {
    angular
    .module('app.my-component')
    .component('myCmp', {
        transclude: true,
        bindings: {
            showContent: '='
        },
        templateUrl: 'my-cmp.html',
        controller: 'MyCmpController'
    });
})();

(function() {
    angular
    .module('app.my-component')
    .controller('MyCmpController', MyCmpController);

    /*@ngInject*/
    function MyCmpController($scope) {
        $scope.showHiddenContent = showHiddenContent;

        function showHiddenContent() {
            $scope.showContent = !$scope.showContent;
        }
    }
})();

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

my-cmp.html

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