ng-model在datepicker指令中不起作用

Question

我有一个初始化datepicker的指令。 该指令附加到输入标记。 但是指令中的ng-model没有绑定在datepicker中选择的选定日期。 这是下面的指令

define(['modules/forms/module', 'jquery-ui'], function (module) {
return module.registerDirective('smartDatepicker', function () {
    return {

        restrict: 'A',

        compile: function (tElement, tAttributes) {
            tElement.removeAttr('smartDatepicker');

            var onSelectCallbacks = [];
            if (tAttributes.minRestrict) {
                onSelectCallbacks.push(function (selectedDate) {
                    $(tAttributes.minRestrict).datepicker('option', 'minDate', selectedDate);
                });
            }
            if (tAttributes.maxRestrict) {
                onSelectCallbacks.push(function (selectedDate) {
                    $(tAttributes.maxRestrict).datepicker('option', 'maxDate', selectedDate);
                });
            }

            var options = {
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                onSelect: function (selectedDate) {
                    angular.forEach(onSelectCallbacks, function (callback) {
                        callback.call(this, selectedDate)
                    })
                }
            };


            if (tAttributes.numberOfMonths) options.numberOfMonths = parseInt(tAttributes.numberOfMonths);

            if (tAttributes.dateFormat) options.dateFormat = tAttributes.dateFormat;

            if (tAttributes.defaultDate) options.defaultDate = tAttributes.defaultDate;

            if (tAttributes.changeMonth) options.changeMonth = tAttributes.changeMonth == "true";


            tElement.datepicker(options);

        }

    }
})

}）;

Answer 1

define(['modules/forms/module', 'jquery-ui'], function (module) {
"use strict";

return module.registerDirective('tachoDatepicker', function () {
    return {
        restrict: 'A',
        require:"ngModel",
        link: function (scope,tElement, tAttributes,ngModelCtrl) {
            tElement.removeAttr('tachoDatepicker');

            var onSelectCallbacks = [];
            if (tAttributes.minRestrict) {
                onSelectCallbacks.push(function (selectedDate) {
                    $(tAttributes.minRestrict).datepicker('option', 'minDate', selectedDate);

                });
            }
            if (tAttributes.maxRestrict) {
                onSelectCallbacks.push(function (selectedDate) {
                    $(tAttributes.maxRestrict).datepicker('option', 'maxDate', selectedDate);

                });
            }

            var options = {
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                dateFormat: "dd/mm/yy",
                onSelect: function (selectedDate) {
                    angular.forEach(onSelectCallbacks, function (callback) {
                        var date=new Date(selectedDate).toISOString().slice(0, 10)
                        scope.$apply(function(){
                            ngModelCtrl.$setViewValue(date)
                        })

                        callback.call(this, selectedDate)
                    })
                }
            };


            if (tAttributes.numberOfMonths) options.numberOfMonths = parseInt(tAttributes.numberOfMonths);

            if (tAttributes.dateFormat) options.dateFormat = tAttributes.dateFormat ;

            if (tAttributes.defaultDate) options.defaultDate = tAttributes.defaultDate;

            if (tAttributes.changeMonth) options.changeMonth = tAttributes.changeMonth == "true";


            tElement.datepicker(options)
        }
    }
})

}）;