Question

使用$urlMatcherFactory提供程序创建新参数类型时，有没有办法在编码/解码或验证它们时过滤类型？我需要一些＆＃34; date＆＃34;参数，似乎最容易创建一个可以从URL编码/解码它们的自定义类型，因为内置＆＃34;日期＆＃34;类型不使用我想要的相同日期格式。我需要在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');。

以下代码段是配置阶段的使用示例。

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>

过滤参数

1 个答案: