Angular: 如何制作可配置过滤器

Question

是否可以像创建可配置服务那样创建可配置过滤器：

angular.module('app', [])
       .provider('resourceUrl', function($filterProvider) { 

    var base = '/';

    this.setPrefix = function(prefix) {base = prefix};

    $filterProvider.register('resourceUrl', resourceUrlFilter);

    this.$get = ??

    function resourceUrlFilter(url) { /* returns the new url */ }
})

我不想创建一个向路径字符串添加基础 url 前缀的过滤器，并且 url 前缀应该是可配置的。

目前我通过在过滤器中注入一个常量来实现这一点

angular.module('app', [])
       .constant('baseUrl', '...')
       .filter('resourceUrl', ['baseUrl', function(baseUrl) {

       return function resourceUrlFilter(url) { /* returns the new url */ }
}]

Answer 1

今天突然想到了这个问题，最近在一个服务中要用到一些过滤器，突然想到：

Since to inject a filter into a service let's say I have created the customDate filter, I have to provide the name customDateFilter in order to inject it

 myModule.factory('MyData', function(customDateFilter) { /* code */ });

所以我想：

Maybe I can register a filter the same way I register a service but then append Filter to the name, and it worked.

不知道这样注册过滤器合法不合法，以后会不会被丢弃但这是一种允许您向提供商注册过滤器的方法

简短版本：

您可以通过创建 ServiceProvider 通常可配置服务的创建方式来注册可配置过滤器 -> https://docs.angularjs.org/guide/providers#provider-recipe 但是，当您注册 ServiceProvider 时，将 Filter 附加到服务名称：

JS

var module = angular.module('app', [])
var customDate = function filterProvider() { /* ServiceProvider definition */ };
myModule.provider('customDateFilter', customDate);

HTML

<p>Some date: <span>{{ $ctrl.date | customDate }}</span> </p>

工作中的例子

这个 plunk 显示了一个可以配置的 baseUrl 过滤器的例子模块 config 块中的前缀 https://plnkr.co/edit/RkTkKM?p=preview

其他选项

您始终可以创建执行过滤的服务，然后通过将其注入 filter 工厂来通过过滤器公开它。此服务可以是使用 Provider Recipe

的可配置服务

class FilteringServiceProvider {

    $get() { return new FilteringService(this.configuration) }

    configure(params) { /* some config logic */ }
}

class FilteringService {

  constructor(configuration) {}

  filterDate(date) { /* some filtering on the date and return a value */ }
}

const myModule = angular.module('app.filters', []);

myModule
  .provider('filteringService', FilteringServiceProvider)
  .filter('customDate', (filteringService) => filteringService.filterDate);

Angular: 如何制作可配置过滤器

Angular: how to make a configurable filter

angularjs

angular-filters

简短版本：

工作中的例子

其他选项