Angular JS組件綁定

Question

我無法將項目從父組件的ng-repeat循環到可用的嵌套組件的作用域。父組件是一個包含許多項目組件的傳送帶。傳送帶由ng-repeat填充。我希望能夠訪問項目控制器（「it」）中的傳送帶控制器（「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