Доступ до змінних області дії з фільтра в 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.