AngularJS Multi-slot transclusion

Question

Ich versuche eine Komponente in AngularJS 1.5.8 mit Multi-Slot-Transclusion zu implementieren.

Mein Test funktioniert gut, wenn ich eine Direktive verwenden, aber mit einer Komponente scheint es, nicht einmal der Steckplatz gefunden wird!.

Dies ist, wie ich die Komponente

app.component('asComponent', function() { 
return { 
    transclude: { 
    'title': '?paneTitle', 
    'body': 'paneBody', 
    'footer': '?paneFooter' 
    }, 
    template: `<h1>I am a component</h1> 
       <div style="border: 2px solid red;"> 
       <div class="title" ng-transclude="title">Fallback Title</div> 
       <div ng-transclude="body"></div> 
       <div class="footer" ng-transclude="footer">Fallback Footer</div> 
      </div>` 
}}); 

app.controller('ExampleController', [ function() { 
    var vm = this; 
    vm.title = 'Lorem Ipsum'; 
    vm.link = 'https://google.com'; 
    vm.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...'; 
}]); 

Und hier das HTML

<div ng-controller="ExampleController as $ctrl" class="container"> 
    <as-component> 
     <pane-title> 
     <a ng-href="{{$ctrl.link}}">{{title}}</a> 
     </pane-title> 
     <pane-body> 
     <p>{{$ctrl.text}}</p> 
     </pane-body> 
    </as-component> 
</div> 

Official AngularJS documentation says

In AngularJS erklären, ist eine Komponente eine besondere Art der Richtlinie t Hut verwendet eine einfachere Konfiguration, die sich für eine komponentenbasierte Anwendungsstruktur eignet.

Wenn dies der Fall ist, dann sollte die Multi-Slot-Übertragung auch mit Komponenten perfekt funktionieren.

Ich weiß, dass ich etwas vermisse, aber ich kann nicht sehen, was es ist!

Ich habe einen kleinen Plunker mit einer Direktive und einer Komponente erstellt.

https://plnkr.co/edit/yTMRD4SrH8CWLK4LQEwe?p=info

Dank

Answer 1

Für Komponenten, ein Objekt verwenden (keine Funktion):

app.component('asComponent', { 
    transclude: { 
    'title': '?paneTitle', 
    'body': 'paneBody', 
    'footer': '?paneFooter' 
    }, 
    template: `<h1>I am a component</h1> 
       <div style="border: 2px solid red;"> 
       <div class="title" ng-transclude="title">Fallback Title</div> 
       <div ng-transclude="body"></div> 
       <div class="footer" ng-transclude="footer">Fallback Footer</div> 
      </div>` 
}); 

Auch sind Sie $ctrl in {{ title }} fehlt. Es sollte sein:

<a ng-href="{{$ctrl.link}}">{{$ctrl.title}}</a> 

Hier arbeitet es in einem plnkr.