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未定义。 Here is a demo Plunkr。我注意到了：

如果我不使用翻译，则过滤功能正常（例如：如果我使用简单的<panel-with-title>代码替换<div>代码）。
无论如何，$scope.allItems已正确定义。

我弄错了让它无法正常工作？在定义$scope.filterValue时，为什么$scope.allItems未定义？

感谢。

Answer 1

您的$scope.filterValue始终undefined并过滤返回true，因为您的模板使用了不同的范围。

所以将$root添加到filterValue，例如：

<input type="text" ng-model="$root.filterValue">

并在组件中使用$scope.$parent.filterValue：

return item.indexOf($scope.$parent.filterValue) !== -1;

Demo Plunker

BTW，好问题：）

Answer 2

如果您不想编写更多代码（filterFunc函数），那么

您应该将此代码连接到模型（ng-model =＆＃34; filterValue＆＃34;），以便通过模型直接过滤。请找到我的以下plunker链接 -

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

过滤不适用于已转换的DOM内容

2 个答案: