过滤参数

Question

当使用$urlMatcherFactory 提供程序创建新的参数类型时，有没有办法在编码/解码或验证它们时过滤类型？我需要一些“日期”参数，而且似乎最容易创建一个可以从 URL 编码/解码它们的自定义类型，因为内置的“日期”类型不使用我想要的相同日期格式。我需要在config 块中执行此操作，因为我需要在实际定义状态之前执行此操作。这意味着我只能使用提供程序（据我所知，如果我错了，请纠正我）。

我找到了一种使用 Angular Bootstrap 中的日期解析器服务来解码日期的方法，方法是注入 uibDateParserProvider 提供程序，然后使用 $get 检索服务，但这似乎不是最好的方法。此外，$filter 提供程序的工作方式似乎不同，因为$filterProvider.$get 返回一个具有注入函数或类似功能的数组作为第二个元素。这个注入函数不是$filter 服务。我对angular 源的研究还不够深入，无法弄清楚它到底是什么，但我很想知道。我知道我可以自己解析日期，但是当有这么多有用的 angular 服务可以为我解析时，为什么还要这样做呢？

这是我正在尝试做的一个示例（使用 ES6）：

angular.module('myModule').config(myStates);

function myStates($filterProvider, $urlMatcherFactoryProvider, $stateProvider, uibDateParserProvider) {
    const decodeDateFormat = 'yyyy-MM-dd'; // the decoder date format
    const encodeDateFormat = 'MMM dd, yyyy'; // the encoder format, which is different from the decoder format

    $urlMatcherFactoryProvider.type('mydate', {
        // encode when switching states, e.g. `$state.go()`
        encode: item => {
            const $filter = $filterProvider.$get(); // returns an array like: ['$filter', filterService] (not sure what the 2nd element is)
            $filter('date')(item, decodeDateFormat); // this is what I ultimately want to do
        },
        // decode from the URL so we can use it as a date
        // this uses a different format from the encoder date format
        decode: item => {
            const uibDateParser = uibDateParserProvider.$get(); // returns the uibDateParser service
            return uibDateParser.parse(item, encodeDateFormat);
        },
        // validate
        is: item => {
            return item == null || angular.isDate(item); // just need to know if it is a date
        },
    });

    $stateProvider.state('myState', {
        url: 'my-path?{someParam:mydate}',
        someParam: null,
    });
}

在为 Angular UI 路由器创建参数类型时，有什么方法可以使用服务吗？ 否则，我如何从其提供者那里获取 $filter 服务，以便进行过滤？

Answer 1

我可以使用$filter 服务，方法是从$injectorProvider 获取它自己，例如$injectorProvider.$get().get('$filter');。

下面的sn-p是config阶段的使用示例。

angular.module('myApp', [])
  .config(function($injectorProvider) {
    var $filter = $injectorProvider.$get().get('$filter');
    console.log($filter('date')(new Date(), 'yyyy-MM-dd'));
  });
angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>