2017-03-28 35 views
5

Próbuję przekazać wartość z jednego komponentu do innego komponentu.AngularJS - Przekaż wartość do komponentu

Lista Lokalizacja

<div uib-accordion-group class="panel-default" heading="{{location.name}}" ng-repeat="location in $ctrl.locations"> 
    <p>This is from location list: {{location.id}}</p> 
    <bike-list locationId="{{location.id}}"></bike-list> 
</div> 

wyjściowa:

To z listy Położenie: 1

Lokalizacja ID to:

Lista Bike

Bike-list.component.js

angular 
.module('bikeList') 
.component('bikeList', { 
    templateUrl: 'bike-list/bike-list.template.html', 
    controller: ['$rootScope', function ($rootScope) { 
     var self = this; 
     self.bikes = $rootScope.currentBikes; 

    }], 
    bindings: { 
     locationId: '<' 
    } 
}); 

rowerów list.template.html

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
    <p>Location id is : {{$ctrl.locationId}}</p> 
</body> 

wyjściowa:

Lokalizacja id:

Pytanie

  • Jak mogę uzyskać lokalizację na liście rowerów?

Odpowiedz

3

Zmieniłem <bike-list locationId="{{location.id}}"></bike-list> do

<bike-list location-id="location.id"></bike-list> 

Które rozwiązały mój problem!

wyjściowa:

To z listy lokalizacji: 1

Lokalizacja id: 1

+1

dzięki za to. Zaoszczędziłem wiele wysiłku –

1

Zamiast <bike-list locationId="{{location.id}}"></bike-list> go zmienić na

<bike-list location-id="$ctrl.location.id"></bike-list> 

kątowe attrs normalizować i można przeczytać więcej na ten temat w here

przykład pracy można znaleźć w here

+0

To powoduje błąd. Wyjście jest teraz: To z listy Położenie: 1 Lokalizacja id to: {{$ ctrl.locationId}} – alexdriedger

+0

Oto przykład https://plnkr.co/edit/U1AxlM1Quthv7T49ergD?p=preview – fernando