Struggling with accessing the item looped from an ng-repeat in a parent component within the scope of a nested component. The parent is a carousel with multiple item components populated by the ng-repeat. Need to be able to access the "item" and a method of the carousel controller ("cr") in the item controller ("it"). Looking for guidance on the correct approach.
carousel.component.html
<slick <!--slick attributes--> >
<div ng-repeat="item in cr.items">
<item-component></item-component>
</div>
</slick>
carousel.component.js
class CarouselController{
constructor(/*stuff*/){
'ngInject';
this.items =[
{"something":"The thing 1","otherthing":"The other thing 1"},
{"something":"The thing 2","otherthing":"The other thing 2"},
{"something":"The thing 3","otherthing":"The other thing 3"}
];
}
parentFunctionToCall(item){
console.log('I called a function on the parent!',item)
}
/*other stuff*/
}
export const CarouselComponent = {
templateUrl: './views/app/components/carousel/carousel.component.html',
controller: CarouselController,
controllerAs: 'cr',
bindings: {
}
}
item.component.html
<div data-something="{{item.something}}">
Yo,{{item.otherthing}}!
</div>
<a href="#" ng-click="cr.parentFunctionToCall(item)">
Trying to call a function on the parent component
</a>
item.component.js
class ItemController{
constructor($scope,/*stuff*/){
'ngInject';
//$scope.it.item & $scope.it.cr are both undefined
console.log(this);
//I understand this is the incorrect way but it works
this.$scope.item = this.$scope.$parent.item;
console.log(this);
}
/*other stuff*/
}
export const ItemComponent = {
templateUrl: './views/app/components/carousel/item.component.html',
controller: ItemController,
controllerAs: 'it',
bindings: {
"item":"=",//i can see this as undefined $scope in ItemController
"cr":"=" //i want to access a method on the parent controller
}
}
This shows whats up... https://plnkr.co/edit/UG20EtI4KxnVnTe8zzz4?p=preview