AngularJS 多槽嵌入答案

【问题标题】：AngularJS Multi-slot transclusionAngularJS 多槽嵌入
【发布时间】：2017-12-01 04:00:33
【问题描述】：

我正在尝试在 AngularJS 1.5.8 中实现一个具有多槽嵌入的组件。

如果我使用指令，我的测试工作正常，但使用组件，似乎连插槽都找不到！。

这就是我声明组件的方式

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...';
}]);

这里是 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

在 AngularJS 中，组件是一种特殊类型的指令，它使用更简单的配置，适用于基于组件的应用程序结构。

如果是这种情况，那么多槽嵌入也应该与组件完美配合。

我知道我遗漏了什么，但我看不到它是什么！

我已经创建了一个带有指令和组件的小型 Plunker。

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

谢谢

【问题讨论】：

需要深入挖掘，但这有帮助吗？在文档中：何时不使用组件：用于需要在编译和预链接函数中执行操作的指令，因为它们不可用

标签： javascript angularjs angularjs-components angularjs-ng-transclude

【解决方案1】：

对于组件，使用对象（不是函数）：

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>`
});

另外，您在{{ title }} 中缺少$ctrl。应该是：

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

它在 plnkr 中工作。

【讨论】：

【解决方案2】：

我根本无法让多槽工作！我很难过，尝试了高达 1.8.2 的多个角度版本

输出总是重复的。命名槽被忽略了吗？

 <as-directive>
            <pane-title>Title</pane-title>
            <pane-body>Text</pane-body>
        </as-directive>


.directive('asDirective', [function () {
    return {
        restrict: 'E',
        transclude: {
            'title': '?paneTitle',
            'body': 'paneBody',
            'footer': '?paneFooter'
        },
        template: '<div style="border: 1px solid black;">' +
            '<div class= "title" ng-transclude="title">Fallback Title</div > '+
        '<div ng-transclude="body"></div>'+
                '<div class="footer" ng-transclude="footer">Fallback Footer</div>'+
            '</div>'
    }
}]);

输出：

<div style="border: 1px solid black;"><div class="title" ng-transclude="title">
            <pane-title class="ng-scope">Title</pane-title>
            <pane-body class="ng-scope">Text</pane-body>
        </div> <div ng-transclude="body">
            <pane-title class="ng-scope">Title</pane-title>
            <pane-body class="ng-scope">Text</pane-body>
        </div><div class="footer" ng-transclude="footer">
            <pane-title class="ng-scope">Title</pane-title>
            <pane-body class="ng-scope">Text</pane-body>
        </div></div>

【讨论】：