时间戳

首页 > 解决方案 > AngularJS 1.7 中用于过滤的函数没有“this”上下文

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

问题描述

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

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($filter) {
    this.$filter = $filter;
    this.search = '';
  }
  customFilter(item) {
     this.$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-click 中调用函数，“this”上下文绑定正确，这是调用组件函数进行过滤的限制吗？

标签： angularjsangular-filters

解决方案

我不确定，但我认为当过滤器调用你的函数时，它会创建自己的上下文，因此你有一个未定义的 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)))">

推荐阅读