過濾參數

Question

當使用$urlMatcherFactory提供程序創建新的參數類型時，有沒有一種方法可以在編碼/解碼或驗證它們時過濾類型？我需要一些「日期」參數，因爲內置的「日期」類型不使用我想要的相同日期格式，所以創建一個可以從URL對它們進行編碼/解碼的自定義類型似乎是最簡單的。我需要在config塊中執行此操作，因爲我需要在實際定義狀態之前執行此操作。這意味着我只能使用提供商（據我所知，如果我錯了，請糾正我）。

我找到了一種方法來使用來自角引導日期解析器服務通過注入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, 
    }); 
} 

有沒有什麼辦法讓角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>