it-swarm.dev

متغيرات نطاق الوصول من مرشح في AngularJS

أقوم بتمرير قيمة 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;
    }
  });

أرغب في حقن اثنين من متغيرات النطاق هناك أيضًا ، مثل ما يمكنني فعله في التوجيهات. هل من الممكن القيام بذلك دون الاضطرار إلى تمرير هذه vars بشكل صريح كوسائط دالة؟

74
Sergei Basharov

على ما يبدو يمكنك.

عادةً ما تقوم بتمرير متغيرات النطاق إلى عامل التصفية كمعلمة دالة:

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. من الصعب للغاية اختبار المرشحات التي تتطلب تبعية "ثقيلة" (النطاق بالكامل).
121
Stewie

لقد وجدت أن this يشير إلى $scope المحلي. لست متأكدًا مما إذا كانت هذه طريقة آمنة للوصول إليها.

5
pavel_karoukin