Angularjs 如何获得jquery插件来调用angular控制器中的代码？

我使用angular js处理表单上的数据处理。它使用

ng keyup

来监听对输入值的更改，并显示相应的消息

要输入他们的出生日期，用户可以直接在三个文本框中键入，也可以使用名为pickaday的jquery插件，该插件允许用户选择一个日期，然后将日期写入三个文本框。由于我可以将

ng keyup

属性添加到文本框中，因此如果用户键入出生日期，而不是使用pickaday插件，那么对出生日期的处理就很简单了

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

我有办法做到这一点吗

---

注意：我试着简单地使用ng change而不是ng keyup来处理三个文本框，希望ng change能够利用pickaday插件对文本框所做的更改，但这不起作用（

正确的方法是a。听起来你喜欢在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>'
    };
});

app.directive（'pickday'，function（）{
返回{
范围：{
//注意，您还可以传递一个函数
值：'='
},
//注意控制器值的变化
控制器：函数（$scope$element）{
$scope.$watch（'value'，函数（newVal，oldVal）{
角度.element（$element）.pickday({
值：parseInt（$scope.value，10）
});
});
},
//初始化pickday
链接：函数（$scope$element，attr）{
$element.pickday({
值：parseInt（$scope.value，10），
//使用pickday的回调，注意应用于触发角度摘要
更改：功能（事件、用户界面）{
if（事件原始事件）{
$scope.value=ui.value；
$scope.$apply（）；
}
}
});
},
模板：“”
};
});

然后在视图上使用如下指令：

<pickday value="value.fromScope"></pickday>

.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();
                        });
                    }
                });

            }
        };
    });

---

最终，我让它像这样正常工作：

<pickday value="value.fromScope"></pickday>

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

你是如何初始化插件的？从插件访问控制器的一种方法是使用一个指令。这个指令将创建所有字段，安装插件并注册回调。你能提供一个例子吗？我想原理在Eugenio Cuevas的回答中。实际上，我不需要双向数据绑定g、 我只需要控制器知道用户何时从插件中选择日期。谢谢。然后，您只需跳过控制器部分，链接部分仍然适用，我可以将此代码粘贴到任何地方，还是粘贴到控制器或模块中的某个地方？我建议您先阅读angular about指令中的链接文档，它们应该是在自己的文件中定义，它甚至没有用

div

替换

pickaday

标记。