Question

我在角应用程序中使用JQuery引导程序datepicker（eternicode.github.io/bootstrap-datepicker/）。

我已经编写了自己的指令来包装这个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

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

我没有像你一样直接在输入ng模式上使用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
        };

    }
);

AngularJS - 在自定义datepicker指令上格式化ngModel

1 个答案: