将 Angular 过滤器与相邻组件一起使用

Question

使用 angular 1.6.4 我无法在相邻组件的 ng-repeat 上使用过滤器。在示例中，我为数据的动态列表（ng-repeat）创建了一个组件，然后为搜索输入创建了一个单独的组件。我不知道如何将数据从搜索组件传递到 keyfeed 组件。

app.js

app.component('keyfeed', {
  bindings: { 
    search: '='
  },
  template: `
    <ul>
     <li ng-repeat="record in records | filter:search">{{ record }}</li>
    </ul>
  `,
  controller: function($scope) {
    $scope.records = [
      "Alfreds Futterkiste",
      "Berglunds snabbköp",
      "Centro comercial Moctezuma",
      "Ernst Handel",
    ];
  }
});

app.component('search', {
  bindings: { 
    search: '='
  },
  template: `
    <input type="search" search="$ctrl.search" ng-model="search">
  `,
  controller: function() {
  }
});

index.html

<search search="search"></search>
<keyfeed search="search"></keyfeed>

Plunker：view

Answer 1

您缺少在模板中执行实际绑定所需的 $ctrl。

<li ng-repeat="record in records | filter:$ctrl.search">{{ record }}</li>

<input type="search" ng-model="$ctrl.search">

See the updated plnkr