Question

我正在学习Angular，我正在试图弄清楚如何将数据传递/绑定到子组件。我有一个主模板，其中包含以下内容：

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

其中treeCtrl来自ui-router状态：

 $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>

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

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格式和label属性打印数据。

将数据从ng-repeat传递/绑定到Angular JS中的子组件

2 个答案: