Angularjs 1.5嵌套組件綁定

值可以從父母被更新過的值他嵌套孩子組分，但孩子不能編輯它，只顯示它。所以是一個單向綁定'<'對不對？

而且我無法在父組件聲明中傳遞子組件，因爲父組件也會有其他用途。

重點是我的父母組件有共同的數據存儲，但他們兒童會以不同的方式使用它。

而父母組件會被多次使用，與不同的孩子，這就是爲什麼我不能通過父母宣言中的孩子。我需要綁定的信息，自動更新的目的，當家長更新數據，必須由孩子

HTML

<parent-component ng-transclude> 
    <child-component name="$ctrl.characters.arya"></child-component> 
    <child-component name="$ctrl.characters.john"></child-component> 
</parent-component>

反映JS

// Parent Component declaration 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .component("parentComponent", { 
     transclude: true, 
     controller: "ParentComponentController", 
     template: 
     '<div class="parent-c"></div>' 
    }); 
})(); 



// Parent Component Controller 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('ParentComponentController', ParentComponentController); 

    function ParentComponentController() { 
    var $ctrl = this; 
    $ctrl.characters = {}; 
    $ctrl.characters.arya = "Arya Stark"; 
    $ctrl.characters.john = "John Snow"; 
    } 
})(); 




//CHILD Component declaration 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .component("childComponent", { 
     bindings: { 
     name: '<' 
     }, 
     controller: "ChildComponentController", 
     template: 
     '<div class="child-c"' + 
      '<h3>Im a child Component</h3>' + 
      '<p><strong>Name: </strong>{{$ctrl.name}}</p>' + 
     '</div>' 
    }); 
})(); 



// CHILD Component Controller 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('ChildComponentController', ChildComponentController); 

    function ChildComponentController() { 
    var $ctrl = this; 
    } 
})();

Check the WORKING SAMPLE on plunkr

要求屬性是爲組件通信，但我試圖用它沒有成功:(在這裏需要一塊光。

來源

2016-08-17 Héctor León

你想傳遞一個名稱爲組件（通過綁定）的屬性或由父（通過要求）繼承？ – gyc

你必須使用：<child-component name="$parent.$ctrl.characters.arya"></child-component>從父分量的值傳遞給他的嵌套的子組分

來源

2016-08-17 12:04:44 DMCISSOKHO

嗨！感謝您的回答。這個工作，但似乎太容易成爲現實，是否有一些糟糕的表現或使用這個不好的做法？ –

有自我包含的元素更好。您可以在另一個項目中輕鬆使用它們。但通常如果你需要外部信息，注入或綁定它們。 – DMCISSOKHO

問題是我的父母組件有共同的數據存儲，但他們的孩子會用不同的方式使用它們。並且父組件將被多次使用，並且與不同的孩子一起使用，這就是爲什麼我不能在父母聲明中傳遞孩子。我需要綁定信息，爲了自動更新目的，當父母更新數據時，必須由孩子反映。 –

有你的代碼不同的問題：

function ParentComponentController() { 
    var $ctrl = this; 
    $ctrl.characters = {}; 
    $ctrl.characters.arya = "Arya Stark"; 
    $ctrl.characters.john = "John Snow"; 
    }

你並不需要爲此定義一個局部變量，因爲不會在任何地方更改上下文

controller: "ParentComponentController",

不要將字符串傳遞到這個屬性，通過一個參考：

controller: ParentComponentController,

然後，如果你想通過父控制器通過name與需要在子組件：

require: { parent: '^^parentComponent' },

現在您已將父級控制器綁定到子級，您可以使用它：

{{$ctrl.parent.characters.arya}}

在模板中。

http://plnkr.co/edit/3PRgQSGdBEIDKuUSyDLY?p=preview

如果您需要通過名稱爲您的子組件的屬性，你必須把孩子部件父母的模板中，所以你可以調用$ CTRL。

http://plnkr.co/edit/1H7OlwbumkNuKKrbu4Vr?p=preview

來源

2016-08-17 12:28:22 gyc

嗨！感謝您的回覆。關於plunkr我有一個文件中的所有內容，但在本地我有每個組件3個文件：1 component.js，1 component.controller.js，1 component.template.html多數民衆贊成這就是爲什麼我定義局部變量和使用字符串，而不是參考。有一種方法可以獲取名稱作爲屬性，但在父模板之外？比如將該名稱存儲在子組件變量或類似的東西中。 –

Angularjs 1.5嵌套組件綁定

回答

相關問題