如何扩展或覆盖angularjs中的现有过滤器？答案

【问题标题】：How to extend or override existing filters in angularjs?如何扩展或覆盖angularjs中的现有过滤器？
【发布时间】：2018-11-20 17:20:34
【问题描述】：

是否可以扩展现有的“标准”过滤器（date、number、lowercase 等）？就我而言，我需要从 YYYYMMDDhhmmss 格式解析日期，所以我想扩展（或覆盖）date 过滤器，而不是自己编写。

【问题讨论】：

标签： angularjs

【解决方案1】：

我更喜欢实现 decorator pattern，这在 AngularJS 中非常简单。
如果我们以@pkozlowski.opensource 为例，我们可以将其更改为：

 myApp.config(['$provide', function($provide) {
  $provide.decorator('dateFilter', ['$delegate', function($delegate) {
    var srcFilter = $delegate;

    var extendsFilter = function() {
      var res = srcFilter.apply(this, arguments);
      return arguments[2] ? res + arguments[2] : res;
    }

    return extendsFilter;
  }])
}])

然后在您的视图中，您可以同时使用.. 标准输出和扩展行为。
使用相同的过滤器

<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p>
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p>

这是一个说明这两种技术的工作小提琴： http://jsfiddle.net/ar8m/9dg0hLho/

【讨论】：

这绝对是我需要的 100%。如果可以的话，我会投你三票。
这是正确答案。但请记住，您必须为过滤器附加Filter 才能获取它们。重新创建一个同名的过滤器对我来说也很好，因为它们通常（总是？）一个函数，你会改变任何方式。
很棒的方法。 q：srcFilter.apply(...) 的第一个参数是this，但是我看到其他示例第一个参数是null。它的目的是什么？
@JossefHarush “apply() 方法调用一个给定 this 值的函数，参数作为数组（或类似数组的对象）提供。” developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 用于推理，这里有一些很好的答案stackoverflow.com/questions/33640079/…
是的。我用它为韩币提供了另一种格式（我猜 AngularJS 使用 angular-locale 使用的格式是错误的），然后回退到其他文化的原始过滤器。

【解决方案2】：

我不确定我是否正确理解了您的问题，但如果您想扩展现有过滤器的功能，您可以创建一个新过滤器来装饰现有过滤器。示例：

myApp.filter('customDate', function($filter) {
    var standardDateFilterFn = $filter('date');
    return function(dateToFormat) {
     return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
    };
});

然后，在您的模板中：

{{now | customDate}}

如上所述，如果您只是想根据给定格式格式化日期，可以使用现有的日期过滤器来完成：

{{now | date:'yyyyMMddhhmmss'}}

这是说明这两种技术的工作 jsFiddle：http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/

请注意，如果未指定格式，AngularJS 将假定这是“中等”格式（确切的格式取决于语言环境）。更多信息请查看http://docs.angularjs.org/api/ng.filter:date。

最后一句话：我对你问题的“解析”部分有点困惑。问题是过滤器用于将对象（在这种情况下为日期）解析为字符串，而不是反之。如果您要解析代表日期的字符串（来自输入），则必须查看 NgModelController#$parsers（检查 http://docs.angularjs.org/guide/forms 中的“自定义验证”部分）。

【讨论】：

根据文档日期过滤器可以接受日期为 ISO 8601 格式的字符串。在我的情况下，输入格式是 'yyyyMMddHHmmss'，所以标准过滤器 date 无法解析它。