AngularJS 1.7中用于过滤的函数没有“ this”上下文

Question

我正在将一些控制器换成组件。我有一个具有自定义过滤器功能的控制器：

function MyController($scope, $filter) {
  $scope.customFilter = function(item) {
     $filter('filter')([item], $scope.search);
  }
}

在我的模板中：

<input type="text" ng-model="search">
<div ng-repeat="item in (filtered = (items | filter:customFilter))" >

当我可以访问$ scope时，这很好用。我的过滤器功能要复杂得多，但是只有一个。我真的不需要将其定义为应用程序的真正过滤器，因为它没有在其他任何地方使用。因此，在控制器本身中只是一个自定义函数。

但是我将控制器移到组件上，但是无法访问$ scope。

class MyComponent {
  constructor() {
    this.search = '';
  }
  customFilter(item) {
     $filter('filter')([item], this.search);
  }
  onCustomClick() {
    // if this is called from ng-click
    // I can access 'this' here, why not in filter
  }  
}

模板：

<input type="text" ng-model="$ctrl.search">
<div ng-repeat="item in ($ctrl.filtered = (items | filter:$ctrl.customFilter))">

customFilter函数与以前一样被调用，但是它没有上下文绑定。 “ this”变量未定义。我是在做错什么，还是应该能够在过滤器功能中访问组件的上下文？

如果我在ng中调用函数，请单击'this'上下文已正确绑定，这是否是调用要过滤的组件函数的限制？

Answer 1

我不确定，但是我认为当filter调用您的函数时，它会创建自己的上下文，因此，您具有未定义的this。

一个快速且替代的解决方案可以是此示例，您还可以将参数传递给您定义的过滤器函数，它将返回匿名函数

class MyComponent {
    constructor() {
      this.search = '';
    }
    customFilter(searchText) {
        return function (item) {
            $filter('filter')([item], searchText);
        }
    }
    onCustomClick() {
      // if this is called from ng-click
      // I can access 'this' here, why not in filter
    }  
  }

模板：

<input type="text" ng-model="$ctrl.search">
<div ng-repeat="item in ($ctrl.filtered = (items | filter:$ctrl.customFilter($ctrl.search)))">