AngularJS 1.5 Verschachtelte Komponenten Bindungen

Question

versucht ist zu Wert von einer Eltern-Komponente seine verschachtelten Kind-Komponente in Winkel 1,5

passieren Der Wert von den Eltern aktualisiert werden kann, aber Kind kann nicht editiere es, zeige es einfach. So ist ein One-Way-Bindung '<' richtig?

Und ich kann die untergeordnete Komponente nicht direkt in der übergeordneten Komponentendeklaration übergeben, weil die übergeordnete Komponente auch andere Verwendungen haben würde.

Der Punkt ist meine Eltern-Komponente haben gemeinsame Daten gespeichert, aber sie Kinder werden es auf verschiedene Arten verwenden.

Und die Eltern-Komponente werde mehrfach verwendet, mit verschiedenen Kindern, deshalb kann ich nicht die Kinder innerhalb der Eltern Erklärung übergeben. Ich brauche die Info zu binden, für die automatische Updates Zwecke, wenn Eltern die Daten aktualisiert, müssen von den Kindern

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; 
    } 
})(); 

---

widerspiegeln Check the WORKING SAMPLE on plunkr

---

Die erfordern Attribut ist für Komponenten Kommunikation, aber ich versuche, es ohne Erfolg zu verwenden :(, brauchen ein Stück Licht hier.

Answer 1

Sie verwenden: <child-component name="$parent.$ctrl.characters.arya"></child-component> einen Wert aus einer Eltern-Komponente zu seiner verschachtelten Kind-Komponente passieren

Answer 2

Es gibt verschiedene Probleme mit dem Code:

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

Sie brauchen nicht zu Definieren Sie hierfür eine lokale Variable, da der Kontext an keiner Stelle geändert wird.

controller: "ParentComponentController", 

nicht eine Zeichenfolge an dieser Eigenschaft übergeben Sie, übergeben Sie eine Referenz:

controller: ParentComponentController, 

Dann mit der Komponente Kind benötigen, wenn Sie name durch die übergeordnete Steuerung übergeben möchten:

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

Jetzt, da Sie den übergeordneten Controller an Kind gebunden haben, können Sie ihn verwenden:

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

in der Vorlage.

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

Wenn Sie den Namen als Attribut für Ihr Kind Komponenten übergeben müssen, müssen Sie innerhalb der übergeordneten Vorlage, um die untergeordneten Komponenten setzen, so dass Sie $ ctrl aufrufen können.

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