Question

我有一个控制器，它获取一个机场列表，这个输入组件用于离开，然后再用于到达。自动完成组件适用于每种情况。我试图弄清楚如何将每个输入所选机场作为单个参数传递给另一个从第二个网址获取价格的控制器。有关如何使用一个组件执行此操作的任何想法？

这是初始提取的控制器

 $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

因为selector-component是一个AngularJS组件，所以它能够接受属性绑定。

您可以更改此组件的注册：

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

这将自动将变量value绑定到控制器，可以使用$ctrl.value在模板中访问该控制器。

此外，value可以像这样传递：

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

有关详细信息，请参阅documentation。

Answer 2

如果selector-component是你的指令那么

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

根据您要绑定的方式/内容，您有不同的选择：

=是双向绑定

@只读取值（单向绑定）

＆安培;用于绑定函数

您应该进行更多研究here

将params从一个控制器传递到另一个AngularJS

2 个答案: