Функция, используемая для фильтрации в AngularJS 1.7, не имеет контекста "this" - PullRequest
Новая
       17

Функция, используемая для фильтрации в AngularJS 1.7, не имеет контекста "this"

0 голосов
/ 31 октября 2019

Я в процессе замены некоторых контроллеров на компоненты. У меня есть контроллер с пользовательской функцией фильтра: 

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' правильно привязан, является ли этоограничение вызова функции компонента для фильтрации?

1 Ответ

0 голосов
/ 31 октября 2019

Я не уверен, но я думаю, что когда фильтр вызывает вашу функцию, он создает собственный контекст, и по этой причине у вас есть неопределенное значение.

В этом примере может быть быстрое и альтернативное решение, вы также можете передатьпараметры для функции фильтра, которую вы определили, и она вернет анонимную функцию 

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)))">
...