AngularJS - 在自定义日期选择器指令上格式化 ngModel

Question

我在 Angular 应用程序中使用 JQuery 引导日期选择器 (eternicode.github.io/bootstrap-datepicker/)。

我已经编写了自己的指令来包装这个日期选择器并进行一些日期格式设置。 Datepicker 工作正常并显示适当的日期格式。

目前，我想显示一个格式化的日期值，并将一个时间戳格式化的值放入 ngModel。

当我不尝试在指令中使用模板时，我的代码还可以：

cosyApp.directive("datepicker", ['moment',
    function(moment) {

        function link($scope, element, attrs, ctrl) {    
            // Init JQuery datepicker
            element.datepicker();

            ctrl.$parsers.push(function(valueFromInput) {
                // Format displayed value in timestamp format
                return moment(valueFromInput).format('X');
            });

        }
        return {
            restrict: 'A',
            require: 'ngModel',
            link: link
        };
    }
]);

但是当我使用模板属性时，ngModel和显示的值是一样的：

return {
    restrict: 'A',
    replace: true,
    require: 'ngModel',
    template: "<div class='input-group date'> {{ngModel}}" +
                "<input class='form-control' ng-model='ngModel'>" +
                "<span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span>" +
            "</div>",
    link: link
};

Answer 1

我对你的 plunker 做了一些改动。我没有试图弄清楚为什么日历会立即显示，而是将日期选择器绑定到输入字段。

我没有像您那样尝试直接在输入 ng-mode 上使用 ngModel，而是创建了一个中间模型对象，然后添加了一个函数来监视输入的更改并将这些更改直接传递给 ngModelController。

旁注，我相信如果您计划在 UI 之外更新模型值并希望它更新视图，则必须添加 $watch 来更新中间模型对象。

http://plnkr.co/edit/5213zUvnqyv0ARqc11aU?p=preview

cosyApp.directive("datepickerx",
    function($window) {

        function link($scope, element, attrs, ctrl) {    
            $scope.model = ctrl.$viewValue;
            // Init JQuery datepicker
            element.find('input').datepicker({
                autoclose: true,
                clearBtn: true,
            });  

            $scope.changed = function() {
              ctrl.$setViewValue($scope.model);
            }

            ctrl.$parsers.push(function(valueFromInput) {
                // Format displayed value in timestamp format and store it to ngModel
                return $window.moment(valueFromInput).format('X');
            });

        }

        /* ********** This part of code doesn't works ********** */

        return {
          restrict: 'A',
          replace: true,
          require: 'ngModel',
          scope: {
              ngModel: '='
          },
          template: '<div class="input-group date">' +
                        '<input class="form-control" ng-model="model" ng-change="changed()"/>' +
                        '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
                    '</div>',
          link: link
        };

    }
);