The transcluded component cannot access its parent required controller

Question

I have a parent component that uses transclude functions. In its closed part, by default is a child component:

export class ParentController { // some logic here } angular.module('dmp').component('parentObject', { bindings: { }, controller: ParentController, transclude: true, templateUrl: 'test/parent.html' }); } export class ChildController { } angular.module('dmp').component('childObject', { bindings: { }, require: { parentCtrl: '^parentObject' }, controller: ChildController, templateUrl: 'test/child.html' }); } 

index.html

 <parent-object> </parent-object> 

parent.html

 <div ng-transclude> <child-object></child-object> </div> 

Note that <child-object> is in part transclude parent

I get the following error:

 Controller 'parentObject', required by directive 'childObject', can't be found! 

if I do so, it works as expected, but it's none of my business.

 <parent-object> <child-object></child-object> </parent-object> 

thanks

EDIT related to gyc comment.

If I understood correctly, I can remove the <div ng-transclude> and just use the child object without turning it off. This is normal, but I want to say later:

 <parent-object> <some-other-object></some-other-object> </parent-Object> 

And then <child-object> will be replaced by <some-other-object> . If I do not use transclusion, this will not happen, and <child-object> will remain.

Answer 1

try changing this in childObject definition

 require: { parentController: '^parentObject' } 

maybe parentCtrl not a specific alias for parentController

Answer 2

camelcased components are limited as dom elements, so they look like this:

 angular.module('dmp').component('childObject', { bindings: { }, require: { parentCtrl: '^parent-object' }, controller: ChildController, templateUrl: 'test/child.html' });