Доступ до змінних області дії з фільтра в AngularJS


74

Я передаю dateзначення своєму власному фільтру таким чином:

angular.module('myapp').
  filter('filterReceiptsForDate', function () {
    return function (input, date) {
      var out = _.filter(input, function (item) {
        return moment(item.value.created).format('YYYY-MM-DD') == date;
      });
      return out;
    }
  });

Я також хотів би ввести туди пару змінних області, як те, що я можу зробити в директивах. Чи можливо це зробити без необхідності явної передачі цих варів як аргументів функції?

Відповіді:


125

Мабуть, можна.

Зазвичай ви передаєте змінні області до фільтра як параметр функції:

function MyCtrl($scope){
  $scope.currentDate = new Date();
  $scope.dateFormat = 'short';
}
<span ng-controller="MyCtrl">{{currentDate | date:dateFormat}}</span> // --> 7/11/13 4:57 PM

Але, щоб передати поточну область дії, потрібно передати this:

<span ng-controller="MyCtrl">{{currentDate | date:this}}</span>

і thisбуде посиланням на поточний обсяг:

Спрощена:

app.controller('AppController',
    function($scope) {
      $scope.var1 = 'This is some text.';
      $scope.var2 = 'And this is appended with custom filter.';
    }
  );
  

app.filter('filterReceiptsForDate', function () {
  return function (input, scope) {
    return input + ' <strong>' + scope.var2 + '</strong>';
  };
});
<div ng-bind-html-unsafe="var1 | filterReceiptsForDate:this"></div>
<!-- Results in: "This is some text. <strong>And this is appended with custom filter.</strong>" -->

PLUNKER

Увага:

  1. Будьте обережні з цим і використовуйте область лише для зчитування значень всередині фільтра, бо інакше ви легко знайдете себе в циклі $ digest.
  2. Фільтри, які вимагають такої "важкої" залежності (весь обсяг), як правило, дуже важко перевірити.

Дякуємо за вичерпну відповідь. Мені здається, мені краще просто передати ці змінні явно фільтру.
Сергій Башаров

Дякую! Для інших, хто читає це, вам не потрібно використовувати, ng-bind-html-unsafeякщо ви не передаєте html. також, я використовував $scopeзамість, scopeтому він всередині функції фільтра такий самий, як я звик скрізь :)
Вейд

Якщо вам дійсно потрібно оновити змінну області, тоді вам слід перемістити фільтр у Controller. Таким чином, він не має "важкої" залежності і його легше перевірити. Просто використовуйте $filter('filter')(array, expression, comparator, anyPropertyKey)вController
ghiscoding

5

Я виявив, що thisпосилання місцеві $scope. Не впевнений, чи це безпечний спосіб отримати до нього доступ.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.