AngularJS - 將值傳遞給組件

我試圖將一個組件的值傳遞給另一個組件。AngularJS - 將值傳遞給組件

位置列表

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

輸出：

這是從位置列表：1

的位置ID是：

自行車名單

自行車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: '<' 
    } 
});

自行車list.template.html

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

輸出：

的位置ID是：

問題

如何獲取locationId到自行車列表？

來源

2017-03-28 alexdriedger

找到我改變<bike-list locationId="{{location.id}}"></bike-list>到

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

哪個解決了我的問題！

輸出：

這是從位置列表：1

的位置ID是：1

來源

2017-03-28 01:10:56 alexdriedger

謝謝你。爲我省下了很多努力 –

相反<bike-list locationId="{{location.id}}"></bike-list>改變它

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

角度正常化ATTRS，您可以在here

工作示例閱讀更多關於它可以在here

來源

2017-03-28 00:54:56 fernando

會導致一個錯誤。輸出現在是：這是從位置列表：1 的位置ID是：{{$ ctrl.locationId}} – alexdriedger

下面是一個例子https://plnkr.co/edit/U1AxlM1Quthv7T49ergD?p=preview – fernando

AngularJS - 將值傳遞給組件

回答

相關問題