Pass/bind 从 ng-repeat 到 Angular JS 子组件的数据

Question

我正在学习 Angular 并且我正在尝试弄清楚如何 pass/bind 向子组件发送数据。我有一个包含以下内容的主模板：

<div class="container" ng-repeat="data in treeCtrl.tree" ng-include="'templates/node.html'"></div>

treeCtrl的来源ui-路由器状态：

 $stateProvider
  .state('tree', {
    abstract: true,
    controller: 'TreeController as treeCtrl',
    url: '',
    template: '<ui-view/>',
    resolve: {
      treeData: ['TreeData', function(TreeData) {
        return TreeData.data();
      }]
    }
  })

在 node.html 中，我正在显示组件：

 <action-form data="data.label"></action-form>

动作表单组件定义如下：

  (function () {
  "use strict";

  angular.module('dTreeApp')
    .component('actionForm', {
      templateUrl: 'templates/action.component.html',
      bindings: {
        data: '='
      },
      controller: actionFormController
    });

  function actionFormController() {
  }
})();

在 action.component.html 我有：

<p>data is : {{data}} </p>
<p>data is : {{data.label}} </p>

除了数据没有正确传递外，我最终正确显示了组件。我尝试更新组件定义中的绑定以使用 =、< @ 但 none 产生了任何结果。

Answer 1

我觉得你的代码没问题

你的绑定有问题。如果你想绑定数据（你希望根据你的代码使用 data 和 data.label）那么你应该绑定它，而不是绑定 data.label

那就这样做吧。

<action-form data="data"></action-form>

Answer 2

我能够使用模板中的控制器密钥修复检索所需的数据。我不需要改变任何其他东西。这是模板现在的样子：

<p>data is : {{$ctrl.data |json}} </p>
<p>data is : {{$ctrl.data.label}} </p>

如果我没有在 form-action 属性中传递数据，第一行将不会打印数据，但 data.label 打印正常。一旦我改变

<action-form data="data.label"></action-form>

到

<action-form data="data"></action-form>

这些行都以 json 格式和标签属性打印数据。

Pass/bind 从 ng-repeat 到 Angular JS 子组件的数据

Pass/bind data from ng-repeat to a child component in Angular JS

javascript

angularjs

angular-components