Question

我正在使用角度j来处理表单上的数据处理。它使用ng-keyup来监听输入值的更改，并显示消息。

要输入他们的出生日期，用户可以直接输入三个文本框或使用名为pickaday的jquery插件，该插件允许用户选择日期，然后将日期写入三个文本框。由于我可以在文本框中添加ng-keyup属性，因此如果用户输入日期而不是使用pickaday插件，则可以直接处理出生日期。

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

我有办法做到这一点吗？

注意：我尝试过简单地使用ng-change而不是ng-keyup来表示三个文本框，希望ng-change能够了解pickaday插件对文本框所做的更改，但这样做不起作用。：（

Answer 1

执行此操作的正确方法是directive。听起来你希望two-way databinding在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>

Answer 2

最终，我得到了正常的工作：

.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>

如何获得一个jquery插件来调用我的角度控制器中的代码？

2 个答案: