更新日期选择器的指令不会更新模型

Question

我在一个 angularjs 项目中使用来自 https://github.com/uxsolutions/bootstrap-datepicker 的时间选择器。

html 看起来像：

<div uxdatepicker ng-model="selectedDate"
  data-provide="datepicker-inline" ng-change="on_date_changed()">
</div>

我创建了如下指令：

app.directive("uxdatepicker", function ()
{
    return {
        require: "ngModel",
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs, controller)
        {
            element.datepicker({
                language: "no",
                format: "yyyy-mm-dd",
                datesDisabled : ["2017-10-10"],
                maxViewMode: "days"
            }).on("changeDate", function (e)
            {
                scope.$apply(function ()
                {
                    controller.$setViewValue(e.date);
                });
            });
        }
    };
});

但我的主控制器中的 $scope.selectedDate 永远不会更新为所选日期。

为什么不呢？

我已在更改日期处理程序中提醒 e.date 以确保它包含所选日期。

Answer 1

我编写了以下指令以使其工作：

app.directive('wmAiGridDatePicker', ['$timeout', '$parse', function ($timeout, $parse) {
        return {//this datePicker will show the date in the wanted format and save it (ng-model) with the default format of yy-mm-dd
            template: '<input type="text"  style="cursor: pointer;border-color: rgb(239, 239, 239);height: 22px;padding-left: 6px;margin-right: 13px;margin-top: 10px;">',
            replace: true,
            require: 'ngModel',
            scope: {},
            link: function (scope, element, attrs, controller) {

                scope.time = {
                    hours: 0,
                    minutes: 0
                };

                var getModel = function () {
                    return controller.$modelValue;
                };

                var options = {
                    format: "dd/mm/yyyy"
                    , autoclose: 'true'                            
                    , todayBtn: "linked"
                    ,todayHighlight:true
                };

                element.datepicker(options);

                element.datepicker().on('hide', function () {

                    $timeout(function () {
                        var date_ = element.datepicker('getDate');

                        if (date_) {
                            date_.setHours(scope.time.hours);
                            date_.setMinutes(scope.time.minutes);                            
                            controller.$setViewValue(moment(date_).unix());
                        }


                        scope.$apply();
                    }, 1);
                });

                element.datepicker().on('changeDate', function () {

                    $timeout(function () {
                        var date_ = element.datepicker('getDate');

                        if (date_) {
                            date_.setHours(scope.time.hours);
                            date_.setMinutes(scope.time.minutes);
                            controller.$setViewValue(moment(date_).unix());
                        }


                        scope.$apply();
                    }, 1);
                });

                scope.onModelChange = function () {                   

                    var date = controller.$modelValue;

                    if (angular.isDate(date)) {
                        scope.time.hours = date.getHours();
                        scope.time.minutes = date.getMinutes();
                    }
                };

                controller.$render = function () {
                    var unixDate = controller.$modelValue;

                    if (!unixDate) {
                        return;
                    }

                    var date = new Date(unixDate * 1000);

                    if (angular.isDate(date)) {
                        scope.time.hours = date.getHours();
                        scope.time.minutes = date.getMinutes();
                    }

                    element.datepicker('setDate', date);
                    element.datepicker('update');
                };

                scope.$watch(getModel, function (newVal) {                    
                    scope.onModelChange();                 
                }, true);

                if (controller) {
                    controller.$render();
                }
            }
        };
    }]);

和 HTML：

<wm-date-picker  
    ng-blur="onChange()" 
    data-ng-model="item.due">
</wm-date-picker>