javascript - ng-model 未更新日期时间字段已更改

Question

所以我在 AngularJS 上的日期选择器指令上遇到了问题。输入已分配指令以及 ng-model，但当有人选择日期时它不会更新模型。但是，如果选择日期后，您直接在输入字段上手动修改日期，它就会更新。

这是我的指令:

.directive('jqdatepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                element.datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onSelect: function (date) {
                        scope.date = date;
                        scope.$apply();
                    }
                });
            }
        };
    });

这是我的 HTML 输入:

<input type="datetime" class="form-control" ng-model="selectedUser.birthday" jqdatepicker />

注意:该字段位于从 Controller 调用的模态上，如下所示:

$modalInstance = $modal.open({
    scope: $scope,
    templateUrl: 'views/modal_user_form.html',
    windowClass: "animated flipInY"
});

提前致谢。

Answer 1

只需使用 onClose 事件而不是 onSelect 即可，但我注意到您的代码中存在小错误 - 您应该使用 ngModelCtrl:

.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                onSelect: function (date) {
                    scope.$apply(function() { 
                      ngModelCtrl.$setViewValue(date);
                    });
                }
            });
        }
    };
});

骗子:http://plnkr.co/edit/kU5g5ov1tduycjd8tUWN?p=preview