Menu
I am trying to pass a value from one component into another component.
Location List
<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>
Output:
This is from location list: 1
Location id is:
Bike List
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: '<'
}
});
bike-list.template.html
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Location id is : {{$ctrl.locationId}}</p>
</body>
Output:
Location id is:
Question
809
I changed <bike-list locationId="{{location.id}}"></bike-list> to
<bike-list location-id="location.id"></bike-list>
Which solved my problem!
Output:
This is from location list: 1
Location id is: 1
179
Instead <bike-list locationId="{{location.id}}"></bike-list> change it to
<bike-list location-id="$ctrl.location.id"></bike-list>
angular normalize attrs and you can read more about it in here
working example can be found in here
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
