问

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

钟z4z萍发布于 2023-02-04 14:38

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

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

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

2 个回答

答案与您的问题相反.Angular 仅注入工厂函数,但不注入结果函数:
```
   .filter('newBookFilter', function($log, ...){ // <- factory function
       return function(input, ...){              // <- resulting function
       };
   })
```
工厂功能具有任意注入参数.结果函数具有固定参数.

第二个原因是你可以在工厂功能中做一些初始化.例如,在定义新指令时,这很有用.工厂也返回闭包,它可以从工厂函数中捕获变量和参数.见下面的例子.它使用依赖注入来获取日志记录对象.这是完整的例子.
```
  .filter('joinBy', function ($log) {     // <- injected here
    return function (input, delimiter) {  // <- used here
      var res = (input || []).join(delimiter || ',');
      $log.info(res);
      return res;
    };
  });
```
2023-02-04 14:40 回答

哈哈哈哈哈咩咩

我认为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
  }
)

如您所见,在创建服务时使用相同的模式.在这里,我们正在创建一个返回函数的服务,我们可以在代码中的其他位置使用该函数.

第一个函数,烤箱函数以及.serviceor .factory或.filterwrapper告诉Angular如何构建函数.第一个函数的返回值是您将在代码中使用的值.

2023-02-04 14:40 回答

作小die_syj

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签