あるコントローラから別のコントローラへパラメータを渡すAngularJS

Question

空港のリストを取得するコントローラがあります。これは、出発のために使用する入力コンポーネントを1つフィードします。オートコンプリートコンポーネントは、それぞれのケースでうまく機能します。私は、各入力を選択した空港を個別のパラメータとして別のコントローラに渡して、第2のURLから価格を取り出す方法を見つけようとしています。 1つのコンポーネントでこれを行う方法に関するアイデアはありますか？

これは、初期これは複数回使用される単一入力コンポーネントである

$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; 
}; 

をフェッチするためのコントローラです。

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

これは、コンポーネントがビュー

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

これは本当にそれで起こって空港セレクタコンポーネントではなく、何でもありで使用するために渡される方法です。

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

export const AirportSelectorComponent = { 
    template 
}; 

Answer 1

のでより多くの研究のために行くべき機能

をバインドするためのsed、それは属性バインディングを受け入れることができます。

あなたは、このようにコンポーネントの登録を変更することができます。

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

これは自動的に$ctrl.valueを使用してテンプレートにアクセスすることができ、コントローラに変数valueをバインドします。

また、valueは次のように渡すことができます。

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

は詳細についてはdocumentationを参照してください。

Answer 2

セレクタコンポーネントがバインドするものをどのように/によっては、その後

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

あなたのディレクティブである場合は、別のオプションがあります。

=双方向

を結合さ

@は単純に値を読み取ります（一方向バインディング）

&はuですあなたは、selector-componentはAngularJSコンポーネントであるhere