Köşeli 1.5 Yuvalanmış Bileşen Bağlayıcı Üst Değer

Question

Angularjs için yeni. Açısal 1.5 iç içe bileşen deniyorum. Alt bileşen özelliğini alt bileşenle ilişkilendirebilir miyim?

Ör:

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

Ben com-bağlama ct.name değer elde edebilirsiniz. Ancak çocuk-com-bind içinde cbsCusCompCntAs.name alamıyorum. (CbsCusCompCntAs olan cbs-cus-comp kontrolör)

Çalışma Plunker: önceden https://plnkr.co/edit/axQwTn?p=preview

teşekkürler.

Answer 1

İlk durumda, controllerAs aracılığıyla doğrudan denetleyici kapsamına başvurmaktasınız. Gerekli kontrolörleri sırasında mevcut olmayacağını

Not: açısal 1.5 bileşenleri kullanırken

Eğer $onInit olarak Components Documentation başına sonra kullanılabilir ebeveynin özelliklerini yapacak require aracılığıyla ana bileşeni elde edebilirler denetleyicinin somutlaştırılması, ancak onlar $ onInit yönteminin yürütülmesinden hemen önce olması garantilidir!

özel durumda ebeveyni gerektirecek çocuğa bileşeni güncelleyebilirsiniz: (İstediğiniz verileri elde etmek

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

ve denetleyici Ben de senin için aynı isimler kullandık o) işe bakın:

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

Güncelleme plunker here olduğunu.

Answer 2

Vay be ... ne harika bir örnek ... Analiz etmem için biraz zaman harcadım ... kendi kendime yazdım (biraz daha okunabilir). Gerçekten Plunker ile çalışmak nasıl bilmiyorum ... işte kodu ...

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

.js dosya benim index.html dosyasından Özü var

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

})();

"gerektiren" parametresi kullanarak çalışır, bu parametreyi "gerektiren" kullanan bir çocuk gibi davranan bileşeni arasındaki sıkı bağlanmış bir ilişki oluşturur rağmen, Saygılarımızla, Johnny

Answer 3

yardımcı Umut ve Çocuk işlevselliğini tüketen bir ebeveyn olarak davranan bileşen.

Daha iyi bir çözüm, here gösterildiği gibi bileşen iletişimini kullanmaktır.

Temel olarak,

Veli HTML, bir fonksiyon çağırmak sağlayan ana işaretlemesindeki, Sonra aynen böyle

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

çocuk bileşeni tanımında bağlayıcı bir işlev tanımlamak

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

Son olarak, ana denetleyicide selectUser işlevinin bir uygulamasını sağlayın.

İşte bir çalışma Plunk.