指令中的角度格式化程序和解析器无法按预期运行?

时间:2015-09-08 01:01:56

标签: javascript angularjs formatting

我正在尝试构建一个小的日期时间指令,该指令允许用户选择具有三个下拉列表(日期,月份,年份)的日期,然后应将其解析为类似于YYYY-MM-DD HH:mm:ss的字符串,以供服务器使用解释 - 这是我在ngModel中的变量。同样,如果存在默认值,则应将其格式化为具有组件值的对象。

format应生成什么

'2012-09-27'应该成为{ year: 2012, month: 'September', date: 27 }

parse应生成什么

{ year: 2008, month: 'October', date: 3 }应该成为2008-10-03

目前,它没有按预期工作。这不是格式化日期问题,而是似乎是一个Angular管道问题(类似于我无法正确理解$parsers$formatters如何工作)。

这是我的指令模板:

<select ng-model="datetimevalue.date" ng-options="day.value as day.display for day in days">
</select>
<select ng-model="datetimevalue.month" ng-options="month.value as month.display for month in months">
</select>
<select ng-model="datetimevalue.year" ng-options="year for year in years()">
</select>

这是我使用的指令:

<datetime ng-model="file.originated_at"></datetime>

这是我的指令代码:

angular.module('directives.datetime', []).directive('datetime', function() {
    return {
        require: 'ngModel',
        restrict: 'E',
        replace: true,
        scope: {
            datetimevalue: '=ngModel'
        },
        link: function($scope, element, attrs, ctrl) {

            $scope.days = [];
            $scope.days.push({ value: 0, display: '-'});

            for (i = 1; i <= 31; i++) {
                $scope.days.push({ value: i, display: i });
            }

            $scope.months = [
                { value: 0, display: '-'},
                { value: 1, display: 'January'},
                { value: 2, display: 'February'},
                { value: 3, display: 'March'},
                { value: 4, display: 'April'},
                { value: 5, display: 'May'},
                { value: 6, display: 'June'},
                { value: 7, display: 'July'},
                { value: 8, display: 'August'},
                { value: 9, display: 'September'},
                { value: 10, display: 'October'},
                { value: 11, display: 'November'},
                { value: 12, display: 'December'}
            ];

            $scope.years = function() {
                var years = [];

                var currentYear = moment().year();

                if (typeof $scope.startYear !== 'undefined') {
                    var startYear = $scope.startYear;
                } else {
                    var startYear = 1950;
                }

                while (currentYear >= startYear) {
                    years.push(currentYear);
                    currentYear--;
                }

                return years;
            };

            //convert data from view format to model format
            ctrl.$parsers.push(function(data) {

                console.log(data);

                return moment({
                    year: data.year,
                    month: data.month - 1,
                    date: data.date,
                    hour: data.hour,
                    minute: data.minute,
                    second: data.second
                }).format('YYYY-MM-DD HH:mm:ss');
            });

            //convert data from model format to view format
            ctrl.$formatters.push(function(data) {
                var dt = moment(data);

                console.log(data);

                return {
                    year: dt.year(),
                    month: dt.month() + 1,
                    date: dt.date(),
                    hour: dt.hour(),
                    minute: dt.minute(),
                    second: dt.second()
                }
            });
        },
        templateUrl: '/js/templates/datetime.html'
    }
});

现在,如果我使用日期选择器选择日期,则公开的父范围上的对象看起来像视图数据,而不是模型数据。

即。我期待2012-09-27,但我有{ year: 2012, month: 'September', date: 27 }

对于它的价值,我使用moment.js作为日期库。

0 个答案:

没有答案