Angular 1.5 Nested Component Bind parent Wartość

Question

Jestem nowy w angularjs. Próbuję komponentu zagnieżdżonego 1.5. Czy mogę powiązać właściwość komponentu nadrzędnego w elemencie potomnym.

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> 

mogę uzyskać wartość ct.name w Com-BIND. Ale nie można uzyskać cbsCusCompCntAs.name w child-com-bind. (CbsCusCompCntAs jest CBS-cus-comp kontroler)

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

góry dzięki.

Answer 1

W pierwszym przypadku odnosi się bezpośrednio do zakresu kontrolera przez controllerAs.

Przy zastosowaniu komponentów w kątowym 1,5 można zdobyć komponentu macierzystego poprzez require co uczyni właściwości rodzica dostępne po $onInit zgodnie Components Documentation:

nocie, że wymagane sterowniki nie będą dostępne podczas Wystąpienie kontrolera, ale gwarantowane jest dostępne tuż przed wykonaniem metody $ onInit!

W Twoim konkretnym przypadku można zaktualizować dziecku składnik wymagać od rodzica:

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

i jej kontrolera, aby uzyskać potrzebne dane (użyłem tych samych nazw, jak ty po prostu zobacz działać):

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

Updated plunker jest here.

Answer 2

Wow ... co za wspaniały przykład ... Zajęło mi chwilę, aby to przeanalizować ... więc napisałem własną (chyba nieco bardziej czytelną) wersję. ja naprawdę nie wiem, jak pracować z Plunker ... więc tutaj jest kod ... Wyciąg z moim pliku index.html

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

The js plik

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

})();

Nadzieję, że to pomaga, Pozdrowienia, Johnny

Answer 3

Chociaż pomocą „require” prace parametrów, tworzy ściśle związany związek między składnikiem działając jako dziecko, który korzysta z „wymagają” parametru, a składnik działający jako rodzic, który pochłania funkcje podrzędne.

Lepszym rozwiązaniem jest użycie komunikacji komponentowej, jak pokazano na rysunku here.

Zasadniczo, można zdefiniować funkcję wiążącą w definicji składnika dziecko, jak tak,

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

Następnie w znacznikach dominującej podać funkcja zadzwonić,

nadrzędna HTML

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

Wreszcie w kontrolerze nadrzędnym podaj implementację funkcji selectUser.

Oto działa Plunk.