AngularJS Многослотовое включение

Я пытаюсь реализовать компонент в 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>

Говорит официальная документация по AngularJS

В AngularJS компонент — это директива особого типа, которая использует более простую конфигурацию, подходящую для структуры приложения на основе компонентов.

Если это так, то многослотовое включение должно отлично работать и с компонентами.

Я знаю, что мне чего-то не хватает, но я не вижу, что именно!

Я создал небольшой плункер с директивой и компонентом.

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

Спасибо


javascript angularjs angularjs-ng-transclude angularjs-components
person MilitelloVinx    schedule 27.06.2017    source источник
comment
нужно копнуть глубже, но поможет ли это? В документах: Когда не использовать Компоненты: для директив, которые должны выполнять действия в функциях компиляции и предварительной компоновки, поскольку они недоступны.   -  person ackzell    schedule 28.06.2017

Ответы (1)


arrow_upward
2
arrow_downward

Для компонентов используйте объект (не функцию):

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.

person Frank Modica    schedule 28.06.2017