在所需控制器中使用 $transclude 时找不到所需控制器

Question

代码的简化示例....

HTML:

<div ng-app="app">
  <m-carousel>
    <m-carousel-slide>foo</m-carousel-slide>
    <m-carousel-slide>bar</m-carousel-slide>
  </m-carousel>
</div>

JavaScript:

class CarouselDirectiveController {
  constructor($transclude) {
    $transclude(clone => {
      // do something
    }, null, 'slide');
  }
}

class CarouselSlideDirectiveController {
  $onInit() {
    console.log(this.carousel);
  }
}

function carouselDirective() {
  return {
    restrict: 'E',
    replace: true,
    controller: CarouselDirectiveController,
    controllerAs: 'carousel',
    template: '<div class="m-carousel" ng-transclude="slide"></div>',
    transclude: {
      slide: 'mCarouselSlide'
    },
    scope: {},
    bindToController: true
  };
}

function carouselSlideDirective() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: CarouselSlideDirectiveController,
    controllerAs: 'carouselSlide',
    template: '<div class="m-carousel-slide" ng-transclude></div>',
    scope: {},
    bindToController: true,
    require: {
      carousel: '^^mCarousel'
    }
  };
}

angular.module('app.carousel', [])
  .directive('mCarousel', carouselDirective)
  .directive('mCarouselSlide', carouselSlideDirective);

angular.module('app', ['app.carousel']);

这会引发以下错误：

https://docs.angularjs.org/error/$compile/ctreq?p0=mCarousel&p1=mCarouselSlide

但是，如果我注释掉 $transclude(clone => {}, null, 'slide'); 那么世界上一切都很好......如果另一个控制器需要父控制器，我如何访问父控制器中的嵌入内容？

代码笔：http://codepen.io/anon/pen/KzdNRE?editors=1011

Answer 1

我想通了这是什么时候...如果您使用 $transclude 这种方式，您必须记住手动附加嵌入的内容。所以...

$transclude(clone => { 
  // do something then... 
  $element.append(clone); 
}, null, 'slide');

在所需控制器中使用 $transclude 时找不到所需控制器

Required controller cannot be found when using $transclude in required controller

angularjs

angularjs-ng-transclude