從ng-repeat將數據傳遞/綁定到Angular JS中的子組件

我正在學習Angular，並試圖弄清楚如何將數據傳遞/綁定到子組件。我有一個具有以下主要模板：從ng-repeat將數據傳遞/綁定到Angular JS中的子組件

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

我最終得到不同的是數據顯示正確的組件沒有被正確地傳遞。我嘗試更新組件定義中的綁定，以使用=,<@但沒有任何結果。

來源

2017-03-15 awm

嘗試數據=「數據」，而不是 –

我能夠修復使用模板中的控制器鍵檢索所需的數據。我不需要改變別的。這裏是模板看起來像現在：如果我沒有通過它在form-action屬性，但data.label打印精細

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

第一行不會打印數據。有一次我改變

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

到

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

的線條都以JSON格式和標籤屬性打印數據。

來源

2017-03-20 19:01:48 awm

您的代碼似乎對我確定

您的綁定有什麼問題。如果您想對綁定的數據（你希望按你的代碼使用data和data.label），那麼你應該綁定反對它，而不是針對data.label

這樣做，那麼。

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

來源

2017-03-15 18:37:11

嗨，謝謝，是啊我累了，它沒有工作。這就是爲什麼我試圖打印'data'和'data.label'這應該是一個屬性。沒有任何內容被打印或記錄在安慰中作爲錯誤。 – awm

你能提供一個小提琴，所以我們可以玩嗎？ –

也顯示了treeCtrl.tree來自哪裏 –

從ng-repeat將數據傳遞/綁定到Angular JS中的子組件

回答

相關問題