Question

您好我想创建具有翻译的组件并将数据从子组件传递到父组件。我的想法在这里：

列出组件模板：

<ul>
 <li ng-repeat="item in $ctrl.list"><ng-transclude></ng-transclude></li>
</ul>

是

<list-component>
  <strong>{{itemFromComponent.name}}<strong>
  //how to get item from list-component to here??
</list-component>

请告诉我如何将当前项目从组件传递给父级以便能够看到它。感谢

Answer 1

在内部组件中，ng-transclude指令添加子范围。

要访问组件范围，请使用$parent：

预设已转换的变量

<list-component list="[1,3,8]">
  LIST {{$parent.$ctrl.list}}<br/>
  ITEM <strong>{{$parent.item}}</strong>
</list-component>

The DEMO

angular.module("app",[])
.component("listComponent", {
  transclude: true,
  bindings: {list: '<'},
  template: `
 <ul>
  <li ng-repeat="item in $ctrl.list">
    $index={{$index}}<br/>
    <ng-transclude></ng-transclude>
  </li>
</ul>
`
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <list-component list="[1,3,8]">
      LIST {{$parent.$ctrl.list}}<br/>
      ITEM <strong>{{$parent.item}}</strong>
    </list-component>
  </body>

Angularjs组件 - 通过传递数据进行转换

1 个答案:

The DEMO