Угловые JS Компонентные привязки

Question

У меня возникли проблемы с созданием элемента из ng-repeat из родительского компонента, доступного для области вложенного компонента. Родительский компонент - это карусель, который содержит много элементов. Карусель заполнен ng-repeat. Я хочу иметь доступ к «элементу» и методу контроллера карусели («cr») в контроллере элемента («он»). Наверное, я собираюсь сделать это совершенно неправильно. Цените, если кто-нибудь может дать мне руль.

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 
    } 
} 

Это показывает, Что до ... https://plnkr.co/edit/UG20EtI4KxnVnTe8zzz4?p=preview

Answer 1

Разочаровывающе просто в конце концов .. Я не знаю, почему это разве понятнее в документации, но ее так же легко, как установка атрибута на ребенка компонента:

<slick <!--slick attributes--> > 
    <div ng-repeat="item in cr.items"> 
     <!--new item="item" attr--> 
     <item-component item="item" call-parent="cr.parentFunctionToCall(item)"></item-component> 
    </div> 
</slick> 

Затем привязка работает как ожидалось. Доступ к функции у родителя ведет себя аналогичным образом. Некоторое имя события должно быть добавлено как атрибут (call-parent, но это может быть что угодно). Связывания необходимо добавить к компоненту ребенка (как в @kuhnroyals комментарий):

... 
bindings: { 
    item:"=", 
    callParent: '&' 
} 

И какое-то событие взаимодействия на ребенка компонента, например ng-click="it.callParent()"

Рабочий пример здесь: https://plnkr.co/edit/RIOPs6?p=preview

Answer 2

controllerAs Использование вы не имеете $scope, вам нужно использовать this. Особенно с компонентами.

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"} 
]; 

См https://docs.angularjs.org/guide/component