Componente nidificato 1,5 angolare Vincolare il valore padre

Question

Sono nuovo di angularjs. Sto provando il componente nidificato angolare 1.5. Posso associare la proprietà del componente principale nel componente figlio.

Es:

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

posso ottenere il valore ct.name in com-bind. Ma non è possibile ottenere cbsCusCompCntAs.name in child-com-bind. (CbsCusCompCntAs è cbs-cus-comp regolatore)

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

Grazie in anticipo.

Answer 1

Nel primo caso ci si riferisce direttamente all'ambito del controller tramite controllerAs.

Quando si utilizza componenti in angolare 1.5 è possibile entrare in possesso del vostro componente principale tramite require che rendono le proprietà del genitore disponibili dopo $onInit secondo Components Documentation:

Si noti che i controllori richiesti non saranno disponibili durante il istanziazione del controller, ma sono garantiti per essere disponibile appena prima che venga eseguito il metodo $ onInit!

Nel vostro caso specifico è possibile aggiornare il bambino componente per richiedere il genitore:

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

e il suo controller per ottenere i dati necessari (ho usato gli stessi nomi come voi solo per vedere il lavoro):

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

plunker aggiornamento è here.

Answer 2

Wow ... che splendido esempio ... Mi ci è voluto un po 'per analizzarlo ... così, ho scritto la mia versione (credo un po' più leggibile). io davvero non so come lavorare con Plunker ... quindi ecco il codice ... estratto dal mio file index.html

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

I file .js

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

})();

Speranza che aiuta, saluti, Johnny

Answer 3

Sebbene l'utilizzo dei "richiedere" opere di parametro, si crea un rapporto stretto legame tra la componente che agisce come un bambino, che utilizza il "richiedono" parametro e il componente che agisce da genitore, che consuma la funzionalità figlio.

Una soluzione migliore è utilizzare la comunicazione componente come mostrato in here.

In sostanza, si definisce una funzione vincolante nella definizione componente figlio, in questo modo,

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

Poi, nel codice genitore si fornisce una funzione da chiamare,

Parent HTML

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

Infine, nel controller principale, fornire un'implementazione della funzione selectUser.

Ecco un lavoro Plunk.