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

使用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

Answer 2

最后简单得令人沮丧。我不知道为什么这在文档中没有更清楚，但它就像在子组件上设置属性一样简单：

<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