Angularjs自定义过滤器和依赖注入 [英] Angularjs custom filter and dependency injection

问题描述

我是AngularJS的新手，我看到了很多这样的语法：

I'm new to AngularJS and i see this syntax a lot:

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

上面的函数是我倾向于看到的一般语法很多，但问题是针对自定义过滤器的这个示例：

The function above is a general syntax i tend to see a lot but problem is specific with this example for custom filter:

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

我明白用另一个函数包装函数让我有机会使用依赖注入，这是我的关于它的问题：

I understand that wrapping the function with another function gives me an opportunity to use dependency injection, Here is my questions about it:

过滤器是否从包装函数返回函数？那么它是否能够使用依赖注入将值注入函数？ 理论上说：

Does the filter get the function returned from the wrapping function? Then is it able to use dependency injection to inject the value into the function? Theoretically that:

此代码：

{{bookObj | newBookFilter}}

将成为：

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

最后 {{}} 将从函数返回最终值。

And finally the {{}} will return the final value from the function.

为什么我不能只将输入注入第一个函数如：

Why can't i just inject the input to the first function like:

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

为什么依赖注入仅适用于返回的函数？

我知道我真的很困惑，如果有人能帮助我，我会非常感激，谢谢大家，祝你有个美好的一天。

I know i really confused here, If anyone can help me i will be very thankful, Thank you all and have a nice day.

推荐答案

我认为Angular工厂，服务，过滤器，指令包装器都是使用Angular风格创建JavaScript对象和函数的烤箱。所以，从Vasiliy的答案借用相同的风格：

I think of Angular factory, service, filter, directive wrappers as ovens that create JavaScript objects and functions with Angular flavors. So, to borrow the same style from Vasiliy's answer:

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

如您所见，在创建服务时使用相同的模式。在这里，我们正在创建一个服务，它返回一个我们可以在代码中的其他地方使用的函数。

As you can see, the same pattern is used in creating services. Here, we are creating a service that returns a function that we can use in other places in our code.

第一个函数，烤箱函数，以及 .service 或 .factory 或 .filter 包装器，告诉Angular如何建立你的功能。第一个函数的返回值是您将在代码中使用的函数。

The first function, the oven function, along with the .service or .factory or .filter wrapper, tells Angular how to build your function. The return value of that first function is what you will use in your code.

这篇关于Angularjs自定义过滤器和依赖注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！