Using transcludeFn in angular components - angularjs

Question

Is it true, that I cannot customize transclusion in angular components (angular 1.5)? The task I want to solve is passing a template to a component using transclusion and make it able to use "in-the-component" variables. Like this:
<my-items-component items="$ctrl.items">
<div>{{::item.description}}</div>
</my-items-component>
Where item supposed to be put into my-items-component documentation, and used to customize the item presentation inside the component.
I was able to do this with directives, using transcludeFn function, but it seems there are no arguments passed to $postLink component hook.
So, should I use a directive for this or there's another approach?

Answer 1

To use tansclusion in AngularJS 1.5 components you need first to enable tarnsclusion in your component by using transclude: true, then use <ng-transclude></ng-transclude> in your component template.
I have created a sample pen as an example http://codepen.io/fadihania/pen/bwpdPq

Answer 2

I've found an answer.
Access $scope of Component within Transclusion in AngularJS 1.5
This worked with my problem. My example:
<my-custom-component>
<input model="$parent.$ctrl.name">
</my-custom-component>
Then in my component now I have "name". I hope this helped you.

Answer 3

there are 2 ways of solving your problem
to place all our html inside component template definition
app.component('myItemComponent', new myItemComponentConfig());
function myItemComponentConfig() {
this.controller = componentController;
this.template = '<div>{{::item.description}}</div>',
this.bindings = {
this.bindings = {
items:'<'
}
};
this.require = {};
}
use it like this :
<my-items-component items="$ctrl.items"></my-items-component>
2.use Ng-transclude to load child HTML of a component
app.component('myItemComponent', new myItemComponentConfig());
function myItemComponentConfig() {
this.controller = componentController;
this.template = '<div></div>',
this.bindings = {
items:'<'
};
this.require = {};
this.transclude:true;
}
use it like this :
<my-items-component items="$ctrl.items">
<div>{{::item.description}}</div>
</my-items-component>