Angular JS Component Bindings

Question

親コンポーネントのng-repeatからネストされたコンポーネントのスコープで使用可能な項目をループ化するのに問題があります。親コンポーネントは、多くのアイテムコンポーネントを含むカルーセルです。カルーセルにはng-repeatが入力されます。私はアイテムコントローラ（ "it"）のカルーセルコントローラ（ "cr"）の "item"とメソッドにアクセスできるようにしたい。私は完全に間違った方法でこれについて行くつもりだと思う。誰かが私に操舵を与えることができればと感謝します。

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を使用する必要があり、$scopeを持っていないcontrollerAsを使用して 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

...元気を示しています。特にコンポーネントを使用する。

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