Bileşen

Question

içinde aktarılan kapsama bir ciltlemenin geçirilmesi AngularJS 1.5'de, bir bileşenden (çoklu alan) geçirilmiş kapsam içine (örneğin, belirli bir veya hepsinden birinde) bir başvuru için bir ciltleme geçirmek istiyorum. hiçbir şekilde yol yoktur.

Bu genel bir özel seçim listesini

// Component 
.component('mySelect', { 
    bind: { 
     collection: '<' 
    }, 
    transclude:{ 
     header: 'mySelectHeader', 
     item: 'mySelectItem' 
    }, 
    templateUrl: 'my-select-template', 
    controller: function(){ 
     ..... 
    } 
}); 

... 
// Component template 
<script id="my-select-template" type="text/ng-template"> 
<ol> 
    <li ng-transclude="header"> </li> 
    <li ng-transclude="item" 
     ng-click="$ctrl.select($item)" 
     ng-repeat"$item in $ctrl.collection"> 
    </li> 
</ol> 
</script> 

... 
// Example usage 
<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]> 
    <my-select-head></my-select-head> 

    <!-- Reference to $item from ng-repeate="" in component --> 
    <my-select-item>{{$item.id}}: {{$item.name}}</my-select-item> 

</my-select> 

bu .component() gelen mümkün mü yaratmak içindir? transclusion için özel yönergeler ile? Ebeveyninizin bileşeninde

Answer 1

, "selectedItem" Çocuğunuz bileşeni benim seçim maddelik ise

gibi bir değişken tutmak benim seçimini gibi ana bileşeni gerektirir

require: { 
    mySelect: '^mySelect' 
} 

altında Ve benim- içinde seçilen öğe

artık erişilebilir olduğunu ebeveyninizin bileşeni Yani

$onInit =() => { 
    this.mySelectedItem= this.mySelect.selectedItem; // to use it inside my-select-item component. 
}; 
select($item) { 
    this.mySelect.selectedItem = $item; // to change the selectedItem value stored in parent component 
} 

erişmek için, bileşenin denetleyicisi-Ürünü seçmek

Answer 2

Bu sorunun içine girdim ve salih'in cevabına dayanarak bir çözüm buldum (yasal uyarı - bkz. Aşağıya bakın: Bu sorunun sizin için mutlaka en iyi yaklaşım olduğunu düşünmüyorum).

.component('item', { 
    require: { mySelect: '^mySelect' }, 
    bind: { item: '<' } 
}) 

sonra şablonunuzu verdiği: aşağıda açıklandığı gibi, mySelect bileşeninde kullanılmak üzere bir söndürdü bileşeni oluşturma içerir Buna bağlı değerine sahip bir madde bileşeni her zaman vardır anlamına gelecektir

<script id="my-select-template" type="text/ng-template"> 
<ol> 
    <li ng-transclude="header"> </li> 
    <li ng-click="$ctrl.select($item)" 
     ng-repeat"$item in $ctrl.collection"> 
     <item item="$item" ng-transclude="item"></item> 
    </li> 
</ol> 
</script> 

o.

.component('myItemComponent', { 
    require: { 
     itemCtrl: '^item', 
    } 
    template: '<span>{{$ctrl.item.id}}: {{$ctrl.item.name}}</span>', 
    controller: function() { 
     var ctrl = this; 
     ctrl.$onInit = function() { 
      ctrl.item = ctrl.itemCtrl.item; 
     } 
    } 
}); 

ve kullanmak için: şimdi, bir özel bileşeninde ihtiyaç olarak kullanabilirsiniz

<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]> 
    <my-select-head></my-select-head> 

    <my-select-item> 
     <my-item-component></my-item-component> 
    </my-select-item> 
</my-select> 

Ben bu uygulamaya sonra ben aslında benim stratejiyi değiştirmeye karar verdi; Bu sizin için de işe yarayabilir.

<script id="my-select-template" type="text/ng-template"> 
<ol> 
    <li ng-transclude="header"> </li> 
    <li ng-click="$ctrl.select($item)" 
     ng-repeat"$item in $ctrl.collection" 
     ng-bind="::$ctrl.format($item)"> 
    </li> 
</ol> 
</script> 

Görüş veya sorularınız varsa bana bildirin: yerine transclude kullanmak yerine, ben yani .:

.component('mySelect', { 
    bind: { 
     collection: '<', 
     customFormat: '&?' 
    }, 
    transclude:{ 
     header: 'mySelectHeader' 
    }, 
    templateUrl: 'my-select-template', 
    controller: function(){ 
     var ctrl = this; 
     ctrl.format = function(item) { 
      if(ctrl.customFormat) { 
       return customFormat({item: item}); 
      } else { 
       //default 
       return item; 
      } 
     } 
     ..... 
    } 
}); 

sonra şablonda, sadece kullanmak, bir biçimlendirme işlevi geçti!