过滤在排除DOM内容时不起作用

Question

我正在构建两个AngularJS (版本1.6.5)组件，当我使用transclusion时，我无法实现过滤。

第一个组件是一个简单的容器，它使用transclusion填充<div>内容：

app.component('panelWithTitle', {
  template: '<div><h1>{{$ctrl.title}}</h1><div class="content" ng-transclude></div></div>',
  bindings: {
    title: '@'
  },
  require: 'title',
  transclude: true
});

第二个组件使用容器(<panel-with-title>)，并向它提供一个简单的筛选(来自输入字段)列表：

app.component('mainComponent', {
  controller: function($scope) {
    $scope.allItems = ["10", "100", "200", "42", "1337"];
    // Simple filter function (may be more complicated)
    $scope.filterFunc = function (item) {
      if (!$scope.filterValue) {
        // No value
        return true;
      }
      return item.indexOf($scope.filterValue) !== -1;
    };
  },
  template: '<panel-with-title title="MyTitle">'            // Replace by <div>
      + '<input type="text" ng-model="filterValue">'
      + '<ul><li ng-repeat="item in allItems | filter:filterFunc">{{item}}</li></ul>'
      + '</panel-with-title>'                               // Replace by </div>
});

在这种状态下，由于$scope.filterValue未定义，过滤无法工作。这是一个演示Plunkr。我注意到：

• 如果我不使用transclusion (例如:如果我用简单的<panel-with-title>标记替换<div>标记)，则筛选是有效的。
• 无论如何，$scope.allItems是正确定义的。

我做错什么让它不起作用了？为什么$scope.filterValue是未定义的，而$scope.allItems是定义的？

谢谢。

Answer 1

如果您不想编写更多的代码(filterFunc函数)，那么

您应该通过模型filterValue将此代码连接到直接过滤器的模型(ng- model =“”)。请找到我下面的柱塞链接-

http://plnkr.co/edit/sp9XFUMXLdmSwESujMQD?p=preview

app.component('mainComponent', {
  controller: function($scope) {
    $scope.allItems = ["10", "100", "200", "42", "1337"];
  },
  template: '<panel-with-title title="MyTitle">'            // Replace by <div>
      + '<input type="text" ng-model="filterValue">'
      + '<ul><li ng-repeat="item in allItems | filter:filterValue">{{item}}</li></ul>'
      + '</panel-with-title>'                               // Replace by </div>
});