Menu
Hello I would like to create component with transclusion and passing data from child to parent component. My idea is here:
List component template:
<ul>
<li ng-repeat="item in $ctrl.list"><ng-transclude></ng-transclude></li>
</ul>
Using
<list-component>
<strong>{{itemFromComponent.name}}<strong>
//how to get item from list-component to here??
</list-component>
Please show me how to pass current item from component to parent to be able to see it. Thanks
672
Inside components, the ng-transclude directive adds a child scope.
To access the component scope, prepend transcluded variables with $parent:
<list-component list="[1,3,8]">
LIST {{$parent.$ctrl.list}}<br/>
ITEM <strong>{{$parent.item}}</strong>
</list-component>
angular.module("app",[])
.component("listComponent", {
transclude: true,
bindings: {list: '<'},
template: `
<ul>
<li ng-repeat="item in $ctrl.list">
$index={{$index}}<br/>
<ng-transclude></ng-transclude>
</li>
</ul>
`
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<list-component list="[1,3,8]">
LIST {{$parent.$ctrl.list}}<br/>
ITEM <strong>{{$parent.item}}</strong>
</list-component>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
