如何在REST调用成功或事件广播后加载角度日期过滤器

How to load angular date filter on success of REST call or after an event broadcast

本文关键字：加载 过滤器 日期 广播 事件 REST 调用 成功      更新时间：2023-09-26

我有一个RESTapi，它为我提供日期格式（以及其他数据）。我希望在自定义日期筛选器中使用此日期格式，以便在视图中使用此筛选器。

我的看法是这样的。

<span>{{vm.filters.fromDate | dateFilter}}</span>

我的滤镜是这样的。

.filter('dateFilter', function( $filter, commonService ) {
      var dateFormat = commonService.getDateFormat();
      return function( inputDate ) {
          return $filter('date')( inputDate, dateFormat );
      };
 })

在commonService commonService.setDateFormat( dateFormat )中还有另一个日期格式设置器，它在REST调用成功时执行。

但在我的情况下，filter在我从api获得响应之前就已经执行了，所以在filter实现中，它无法通过commonService.getDateFormat()从commonService获得任何日期格式。因此错误的日期格式反映在UI上。

在某件事成功或事件广播时，执行/加载角度过滤器的最佳方式是什么？

您可以在REST成功中调用commonService.getDateFormat（），并将其值"日期格式"传递给筛选器，这里是一个代码示例。

angular.module('testApp', [])
            .filter('dateFilter', function($filter) {
                return function(inputDate, dateFormat) {
                    return $filter('date')(inputDate, dateFormat);
                };
            })
            .controller('AppCtrl', appCtrl);
        function appCtrl($timeout) {
            var vm = this;
            vm.init = function() {
              // fake service callback
              $timeout(function () {
                vm.datetime = new Date();
                vm.dateFormat = 'yyyy-MM-dd';
              },1000);
            }
        }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
    <h1>This is a heading</h1>
    <div ng-controller="AppCtrl as vm" ng-init="vm.init()">
        <p>{{ vm.datetime | dateFilter: vm.dateFormat }}</p>
    </div>
</body>

您可以将过滤器标记为$stateful：

.filter('dateFilter', function () {
    var dateFormat = commonService.getDateFormat();;
    function dateFilter(input) {
        if (dateFormat) {
            return $filter('date')( inputDate, dateFormat );
        } else {
            return "---"; //some placeholder until format is loaded
        }
     }
     dateFilter.$stateful = true; //important
     return dateFilter;
});

但还有更好的选择（我不知道在你的情况下是否可能）。

如果您控制了后端，您可以将一些contant作为javascript对象呈现到主视图中。然后您可以使用angular.constant将它注入到您的应用程序中。

如果你写更多关于你的后端，那么我可以扩展我的anwser。

其他解决方案

如果您不想使用有状态过滤器，也可以使用作为参数传递的模式来制作过滤器。

.filter("dateFilter", function() { // register new filter
    return function(input, pattern) { // filter arguments
         ....
    };
});

您可以将模式作为筛选器的参数传递：

{{ vm.filters.fromDate | dateFilter: vm.pattern}}

在这种情况下，如果参数发生变化，则需要更新过滤器。

相关文章：