Passing params from one controller to another AngularJS

Question

I have a controller which fetches a list of airports, this feeds a single input component which I use for Departing and then again for Arrival. The autocomplete component works great for each case. I am trying to figure out how to pass each inputs selected airports as a individual param to another controller which fetches prices from a second url. Any ideas on how to do this with one component?

This is the controller for the initial fetch

 $scope.airport_list = null;

 $http({
  url: 'someUrl.com',
  method: 'GET'
 })
  .then((response) => {
    $scope.airport_list = response.data.airports;
 });

 $scope.searchFor = function(airportName) {
  $scope.hidelist = false;
  const output = [];
  angular.forEach($scope.airport_list, function(airport) {
    if (airport.name.toLowerCase() === airportName) {
      output.push(airport);
    }
  });
  $scope.airports = output;
 };

 $scope.selectAirport = function(airportName) {
   $scope.airportSearch.name = airportName.name;
   $scope.state = !$scope.state;
 };

This is the single input component which is used multiple times.

<div class="control" ng-controller="selectCtrl">
  <div>
    <input type="text" name="airport" 
      id="airport" ng-model="airportSearch.name" />
      <div class="airport-container-dropdown" ng-
        hide="!airportSearch.name">
      <div class="airport-list"
        ng-repeat="airport in airport_list | filter:airportSearch"
        ng-show="!state"
        ng-click="selectAirport(airport)">
       {{ airport.name }}
      </div>
    </div>
  </div>
</div>

This is how the component is passed for use in the view

  <div class="control">
    <label for="from">From:</label>
    <selector-component id="from"></selector-component>
  </div>
  <div class="control">
    <label for="to">To:</label>
    <selector-component id="to"></selector-component>
  </div>

This is the airport selector component, not anything really going on with it.

import template from './airport-selector.html';

export const AirportSelectorComponent = {
  template
};

.component('selectorComponent', SelectorComponent) in the apps main module — Shawn Sheehan
– Shawn Sheehan, Commented Dec 4, 2017 at 6:19

31piy · Accepted Answer · 2017-12-04 06:27:30Z

1

Since, selector-component is an AngularJS component, it is capable of accepting the attribute bindings.

You can change the registration of component like this:

angular.module( ... )
  .component('selectorComponent', {
    ...
    bindings: {
      value: '<'
    },
    ...
  });

This will automatically bind a variable value to the controller, which can be accessed in the template using $ctrl.value.

Also, the value can be passed like this:

<selector-component value="bind the value here">

Refer to the documentation for more details.

answered Dec 4, 2017 at 6:27

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D. Pareek · Accepted Answer · 2017-12-04 06:08:55Z

0

If selector-component is your directive then

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

Depending on how/what you want to bind, you have different options:

= is two-way binding

@ simply reads the value (one-way binding)

& is used to bind functions

You should go for more research here

answered Dec 4, 2017 at 6:08

D. Pareek

7594 silver badges12 bronze badges

2 Comments

Shawn Sheehan Over a year ago

How do I bind 2 different values coming from the same select component? This makes sense though and is the right direction. Thank You

D. Pareek Over a year ago

you can do like : <selector-component id="from" param="value"></selector-component> In main controller you can define $scope.value = "", and use $scope.param in selector-component

Collectives™ on Stack Overflow

Passing params from one controller to another AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related