Пользовательский фильтр Angularjs и инъекция зависимостей

Я новичок в AngularJS, и я вижу этот синтаксис много:

function someFunc(){
   return function(input){
    return 'hello' + input;
  }
}

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

angular.module('bookFilters', [])
    .filter('newBookFilter', function(){
          return function(input){
        return 'The Book: ' + input.name + 'is new !';
   };
});

Я понимаю, что перенос функции с помощью другой функции дает мне возможность использовать инъекцию зависимостей. Вот мои вопросы:

Получает ли фильтр функцию, возвращаемую из функции обертки? Тогда можно ли использовать инъекцию зависимостей для ввода значения в функцию? Теоретически это:

Этот код:

{{bookObj | newBookFilter}}

Станет:

{{   bookObj | function(input){return 'The Book: ' + input.name + 'is new !'; }  }}

И, наконец, {{}} вернет окончательное значение из функции.

Почему я не могу просто ввести input в первую функцию, например:

angular.module('bookFilters', [])
         .filter('newBookFilter', function(input){
             return 'The Book: ' + input.name + 'is new !';
     });

Почему инъекция зависимостей будет работать только с возвращенной функцией?

Я знаю, что я действительно запутался здесь. Если кто-нибудь может мне помочь, я буду очень благодарен, спасибо всем и у вас хороший день.

Ответы

Ответ 1

Я думаю о Angular factory, об услугах, фильтрах, директивных упаковщиках, таких как духовки, которые создают объекты и функции JavaScript с ароматами Angular. Итак, чтобы взять тот же стиль у Василия, ответьте:

// Don't use this code in a real app. It just to illustrate a point.
angular.module('App', [])

// The following oven makes an Angular flavored JavaScript function that 
// formats a currency
.service('currencyBadFilterFn',
  // We inject a built-in Angular filter, currencyFilter, into our oven
  function(currencyFilter) { 
    // oven produces a function that can be used in other places in Angular code
    return function(number) {
      // produced function returns a currency-formatted number when used
      return currencyFilter(number)   
    }
  }
)

.controller('MainCtrl',
  function($scope, currencyBadFilterFn) {
    $scope.amount = currencyBadFilterFn(10) // $10.00
  }
)

Как вы можете видеть, тот же шаблон используется при создании служб. Здесь мы создаем службу, которая возвращает функцию, которую мы можем использовать в других местах нашего кода.

Первая функция, функция духовки, вместе с оберткой .service или .factory или .filter, сообщает Angular, как построить вашу функцию. Возвращаемое значение этой первой функции - это то, что вы будете использовать в своем коде.

Ответ 2

Ответ противоположный вашему вопросу. Angular вводит только в factory, но не в результирующую функцию:

   .filter('newBookFilter', function($log, ...){ // <- factory function
       return function(input, ...){              // <- resulting function
       };
   })

Функция

Factory имеет произвольные введенные параметры. Результирующая функция имеет фиксированные параметры.

Вторая причина заключается в том, что вы можете выполнить некоторую инициализацию в функции factory. Это полезно, например, при определении новой директивы. Кроме того, factory возвращает замыкание, которое может захватывать переменные и аргументы из функции factory. См. Пример ниже. Он использует инъекцию зависимостей для получения объекта регистрации. Здесь приведен полный пример.

  .filter('joinBy', function ($log) {     // <- injected here
    return function (input, delimiter) {  // <- used here
      var res = (input || []).join(delimiter || ',');
      $log.info(res);
      return res;
    };
  });

Ответ 3

Вот как я это сделал.

myApp.filter("myCustomDateFormatter", ['MyFactoryWithCustomFunctions', function (InjectedCustomFunction) {
    return function (input) {
        return InjectedCustomFunction.GetDateFromDotNetJson(input);
    }
}]);