74 votes

Accéder aux variables de la portée à partir d'un filtre dans AngularJS

Je transmets la valeur date à mon filtre personnalisé de la manière suivante:

 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;
    }
  });
 

J'aimerais aussi y introduire quelques variables de portée, comme ce que je peux faire dans les directives. Est-ce possible de le faire sans avoir à passer explicitement ces vars comme arguments de fonction?

123voto

Stewie Points 20312

Apparemment, vous pouvez.

Habituellement, vous devez passer portée des variables pour le filtre en tant que paramètre de la fonction:

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

Mais, pour passer le champ d'application actuel, vous auriez à passer this:

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

et this sera une référence à portée actuelle:

Simplifié:

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

Avertissement:

  1. Être prudent et d'utiliser uniquement le périmètre de lire les valeurs à l'intérieur du filtre, parce que sinon, il vous sera facile de trouver votre auto dans $digest boucle.
  2. Les filtres qui ont besoin d'un tel "lourd" de la dépendance (l'ensemble) ont tendance à être très difficile à tester.

5voto

pavel_karoukin Points 51

J'ai trouvé que "ceci" fait référence à la portée locale $. Pas sûr que ce soit un moyen sûr d'y accéder malgré tout.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X