0

我正在使用 Angular js 来处理表单上的数据。它用于ng-keyup监听输入值的变化，并显示消息作为结果。

要输入他们的出生日期，用户可以直接在三个文本框中键入或使用一个名为 pickaday 的 jquery 插件，它允许用户选择一个日期，然后将日期写到三个文本框中。因为我可以将ng-keyup属性添加到文本框中，所以如果用户键入它而不是使用 pickaday 插件，出生日期的处理就很简单了。

pickaday 插件的初始化脚本允许您在用户选择日期时指定回调函数。我需要以某种方式获取此回调以在我的控制器中运行代码，以便当用户从插件中选择一个日期时运行相同的代码，就好像他已经输入了它一样。

有没有办法我可以做到这一点？

注意：我尝试对三个文本框简单地使用 ng-change 而不是 ng-keyup，希望 ng-change 能够接收到 pickaday 插件对文本框所做的更改，但这不起作用。:(

4

2 回答 2

1

执行此操作的正确方法是指令。听起来您希望在 Angular 和 jQuery 插件之间进行双向数据绑定。我只是在猜测插件是如何工作的，但我想你明白了

app.directive('pickday', function() {
    return {
        scope: {
            // note you can also pass a function
            value: '='
        },
        // watch for changes on controller value
        controller: function ($scope, $element) {
            $scope.$watch('value', function(newVal, oldVal) {
                angular.element($element).pickday({
                    value :parseInt($scope.value, 10)
                });
            });
        },
        // initialize pickday
        link: function ($scope, $element, attr) {
        $element.pickday({
            value: parseInt($scope.value, 10),
            //use the callback from pickday, note apply to trigger angular digest
            change: function(event, ui) {
                if (event.originalEvent) {
                    $scope.value = ui.value;
                    $scope.$apply();
                }
            }
        });
    },
    template: '<div class="pickday"></div>'
    };
});

然后在您的视图上使用指令，如下所示：

<pickday value="value.fromScope"></pickday>
于 2013-10-24T10:17:47.803 回答
0

最终，我让它像这样工作得很好：

.directive('datepicker', function() {
        return {
            link: function (scope) {
                var minYear = moment().year() - 90,
                maxYear = moment().year() - 13,
                today = moment().subtract('years', 13);

                var picker = new Pikaday({
                    field: document.getElementById('datepicker'),
                    trigger: document.getElementById('date-button'),
                    defaultDate: today.toDate(),
                    maxDate: today.toDate(),
                    yearRange: [minYear, maxYear],
                    onSelect: function() {
                        scope.$apply(function() {
                            scope.dayOfBirth.value = picker.getMoment().date();
                            scope.monthOfBirth.value = picker.getMoment().month() + 1;
                            scope.yearOfBirth.value = picker.getMoment().year();
                            scope.dateOfBirth.validate();
                        });
                    }
                });

            }
        };
    });

该指令可以使用以下 HTML 触发：

<div datepicker></div>
于 2013-10-25T16:10:04.050 回答