Angularjs 自定义过滤器和依赖注入

Question

我是 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 !';
     });

为什么依赖注入只对返回的函数起作用？

我知道我在这里真的很困惑，如果有人可以帮助我，我将非常感激，谢谢大家，祝你有美好的一天。

Answer 1

我就是这样做的。

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

Answer 2

我将 Angular 工厂、服务、过滤器、指令包装器视为创建具有 Angular 风格的 JavaScript 对象和函数的烤箱。因此，从 Vasiliy 的回答中借用相同的风格：

// Don't use this code in a real app. It's 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 如何构建你的函数。第一个函数的返回值就是您将在代码中使用的值。

Answer 3

答案与您的问题相反。 Angular 将 only 注入到工厂函数中，但 不 注入到结果函数中：

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

工厂函数具有任意注入参数。结果函数具有固定参数。

第二个原因是您可以在工厂函数中进行一些初始化。例如，当您定义 new directive 时，这很有用。工厂还返回闭包，它可以从工厂函数中捕获变量和参数。请参见下面的示例。它使用依赖注入来获取日志对象。 Here 是完整的例子。

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