Question

我正在尝试使用多插槽转换在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中，Component是特殊类型的指令，它使用更简单的配置，适用于基于组件的应用程序结构。

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

我知道我错过了什么，但我看不出它是什么！

我用一个指令和一个组件包装了一个小的Plunker。

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

由于

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

此外，您在$ctrl中遗漏了{{ title }}。它应该是：

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

这是在plnkr。

AngularJS多槽插值

1 个答案: