Question

我有一个简单的AngularJS服务，它处理日期格式转换：

'use strict';

angular.module('myApp')
    .service('DateUtils', function () {

        /**
         * Convert US -> EU date format OR EU -> US data format
         * @param date Date format yyyy-MM-dd OR dd-MM-yyyy
         * @returns {*} opposite of input
         */
        this.simpleDateFormatConverter = function (date) {
            if (date) {
                var benchmark = date.substr(0, 4);

                //  Check wether the first four digits are integers (US)
                var matches = benchmark.match("^[0-9]*$");

                //  if the date is US simple date format (yyyy-MM-dd)
                if (matches != null) {
                    var year = date.substr(0, 4);
                    var month = date.substr(5, 2);
                    var day = date.substr(8, 2);
                    // US -> EU
                    return day + "-" + month + "-" + year;
                } else {
                    var year = date.substr(6, 4);
                    var month = date.substr(3, 2);
                    var day = date.substr(0, 2);
                    // EU -> US
                    return year + "-" + month + "-" + day;
                }
            } else {
                return null;
            }

        }
    });

案例：我有一个编辑页面，该页面正在填充该实体的现有数据。（在这种情况下，生日日期采用美国格式）。在我的控制器中，如下所示，我正在注入服务并使用其功能来转换实体作者的birthDate。

访问编辑页面时，生日日期采用美国格式，但刷新页面时，会根据需要进行转换。

'use strict';

angular.module('myApp')
    .controller('AuthorEditController',
        ['$scope', '$stateParams', 'entity', 'Author', '$state', 'DateUtils',
            function ($scope, $stateParams, entity, Author, $state, DateUtils) {

                $scope.error = null;
                $scope.author = entity;

                $scope.load = function (id) {
                    Author.get({id: id}, function (result) {
                        $scope.author = result;
                    });
                };

                // Only working on page reload
                $scope.author.birthDate = DateUtils.simpleDateFormatConverter($scope.author.birthDate);

                $scope.save = function () {
                    // save author
                };

            }]);

是因为我的数据尚未正确加载，因此该服务无法操纵当时未定义的数据吗？

如何确保动态完成第一页加载？

Answer 1

这是因为Author.get（）返回promise，因此它在一个单独的线程中解析。要使代码正常工作，您应该在回调函数中调用Date转换器，如下所示：

$scope.load = function (id) {
                    Author.get({id: id}, function (result) {
                        $scope.author = result;
                        $scope.author.birthDate = DateUtils.simpleDateFormatConverter($scope.author.birthDate);

                    });
                };

如果您不熟悉承诺，可能需要先继续学习。

看看： http://andyshora.com/promises-angularjs-explained-as-cartoon.html

Answer 2

有几件事正在发生。您正在以异步方式加载作者对象，这意味着包含作业$scope.author = result;的回调函数将在以后的大多数情况下触发，而不是转换发生。所以@Italo Ayres回答说，你应该在回调函数中执行你的转换。

刷新页面后正确转换数据的行为可能是另一个问题：

似乎Author服务缓存结果并返回先前返回的对象。因此请注意，您刚刚修改了仍受Author服务控制的对象。当您在其他地方使用该服务时，这可能导致很难跟踪错误。考虑将转换放入服务（如果是这样）或深入克隆给您的项目，以免影响其他人。如果它只是一个UI问题，您还可以添加一个只转换数据以显示它而不需要修改对象的函数。想想保存时对象会发生什么 - 你真的想保存格式化的日期值吗？

Answer 3

建议使用 filter 作为日期，而不是使用工厂

angular.module('myApp').filter('DateUtils', function (date) {


if (date) {
                var benchmark = date.substr(0, 4);

                //  Check wether the first four digits are integers (US)
                var matches = benchmark.match("^[0-9]*$");

                //  if the date is US simple date format (yyyy-MM-dd)
                if (matches != null) {
                    var year = date.substr(0, 4);
                    var month = date.substr(5, 2);
                    var day = date.substr(8, 2);
                    // US -> EU
                  var result= day + "-" + month + "-" + year;
                } else {
                    var year = date.substr(6, 4);
                    var month = date.substr(3, 2);
                    var day = date.substr(0, 2);
                    // EU -> US
                   var result= year + "-" + month + "-" + day;
                }
            } else {
                var result= null;
            }



        return function (result) {

                return result;

        }


    }
});

<强> HTML：

<p>{{yourDate | DateUtils }}</p>

还有原生角色日期 formats

在第一页加载时加载服务

3 个答案: