2016-03-17 21 views
5

Ich bin neu in AngularJS. Ich versuche Winkel 1.5 verschachtelte Komponente. Kann ich die Eigenschaft der übergeordneten Komponente in der untergeordneten Komponente binden?Angular 1.5 Verschachtelte Komponente Bind Mutter Wert

Ex:

<div ng-app='cbsApp' ng-controller='cbsCnt as ct'> 
    <cbs-cus-comp com-bind='ct.name'> 
     <child child-com-bind='cbsCusCompCntAs.name'></child> 
    </cbs-cus-comp> 
</div> 

I ct.name Wert in com-bind erhalten können. Aber cbsCusCompCntAs.name kann nicht in kind-com-bind erhalten werden. (CbsCusCompCntAs ist cbs-cus-comp-Regler)

Arbeits Plunker: https://plnkr.co/edit/axQwTn?p=preview

Vielen Dank im Voraus.

Antwort

6

In Ihrem ersten Fall, Sie beziehen sich direkt auf den Steuerungsbereich über controllerAs.

Wenn Komponenten in Winkel 1.5 verwenden, können Sie halten Ihre Stammkomponente über require erhalten die Eltern Eigenschaften nach $onInit zur Verfügung stellen wird, wie pro Components Documentation:

Beachten Sie, dass die erforderlichen Controller werden nicht während der verfügbar sein Instantiierung der Steuerung, aber sie sind garantiert zur Verfügung steht kurz vor der $ onInit Methode ausgeführt wird!

In Ihrem speziellen Fall können Sie die Kind Komponente aktualisieren, um die Eltern zu verlangen:

var child = { 
    require  : {parentComp:'^cbsCusComp'}, 
    template : 'Child : <b{{cbsCusChildCompCntAs.childComBind}}</b>', 
    controller : cbsCusChildCompCnt, 
    controllerAs: 'cbsCusChildCompCntAs' 
    }; 

und seine Controller die Daten, die Sie (müssen gewöhnungs ich die gleichen Namen wie du gerade sehen es arbeiten):

function cbsCusChildCompCnt(){ 
    this.$onInit = function() { 
    this.childComBind = this.parentComp.name; 
    }; 
} 

Aktualisiert Plunker ist here.

4

Wow ... was für ein wunderbares Beispiel ... dauerte eine Weile, um es zu analysieren ... so schrieb ich meine eigene Version (ich ein bisschen mehr lesbar denken). Ich weiß nicht wirklich, wie mit Plunker arbeiten ... also hier ist der Code ... Auszug aus meiner Datei index.html

<div ng-controller='appCtrl as ctrl'> 
    <parent bind-id='ctrl.name'> 
     <child bind-toid='parentCtrlAs.name'></child> 
    </parent> 
</div> 

Die Js Datei

(function() { 
'use strict'; 

var 
    parentComponent = 
    { 
     bindings : 
     { 
      bindId:'=' 
     }, 
     controller : parentCtrl, 
     controllerAs: 'parentCtrlAs', 
     restrict : 'A', 
     transclude : true, 
     templateUrl : 'parent.html', 
    }; 

var 
    childComponent =  
    { 
     controller : childCtrl, 
     controllerAs: 'childCtrlAs', 
     restrict : 'A', 
     require  : 
     { 
      myParent :'^parent' 
     }, 
     templateUrl : 'child.html', 
}; 


angular 
    .module('app', []) 
    .controller('appCtrl' , appCtrl) 
    .component('parent'  , parentComponent) 
    .component('child'  , childComponent); 


function appCtrl(){ 
    this.name = 'Main..'; 
} 

function childCtrl(){ 
    this.$onInit = function() { 
     this.bindToid = this.myParent.name; 
    }; 
} 

function parentCtrl(){ 
    this.name = 'Parent Component'; 
} 

})();

Hoffe, es hilft, Grüße, Johnny

3

Obwohl die „require“ Parameter Werke verwenden, eine fest gebundene Beziehung zwischen dem Bauteil erzeugt als Kind handeln, die die „require“ Parameter verwendet, und die Komponente, die als übergeordnetes Element fungiert und die untergeordneten Funktionen verwendet.

Eine bessere Lösung ist Komponentenkommunikation wie gezeigt here zu verwenden.

Grundsätzlich Sie eine Bindungsfunktion in der untergeordneten Komponentendefinition definieren, wie so,

angular.module('app').component('componentName', { 
templateUrl: 'my-template.html', 
bindings: { 
     myFunction: '&' 
}, 
controller: function() { // Do something here} 
}); 

Dann in der übergeordneten Markup Sie eine Funktion zur Verfügung stellen zu nennen,

Eltern HTML

<user-list select-user="$ctrl.selectUser(user)"> 
 
</user-list>

Stellen Sie schließlich im übergeordneten Controller eine Implementierung der Funktion selectUser bereit.

Hier ist eine funktionierende Plunk.

Verwandte Themen