All geek questions in one place

AngularJS - Passing a value to a component

I am trying to pass a value from one component to another component.

List of locations

<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 the list of locations: 1

Location Id:

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

Question

  • How can I get locationId in the bike list?
+5
source share
2 answers

I changed <bike-list locationId="{{location.id}}"></bike-list> to

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

What solved my problem!

Output:

This is from the list of locations: 1

Location Id: 1

+3
source

Instead of <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 learn more about it in here

a working example can be found in here

+1
source

Source: https://habr.com/ru/post/1265984/

More articles:


All Articles