javascript - jQuery 插件未正确定位指令

Question

我一直在玩弄 this slick jQuery datpicker并想将其包装为一个指令，我可以在我的 Angular 应用程序中使用它。该指令的代码目前非常简单:

directive('datePicker', function() {
    return {
        restrict: 'E',
        template: '<input type="text" class="topcoat-text-input--large full" placeholder="Select Date">',
        link: function (scope, element, attrs) {
            element.pickadate();
        }
    }

如您所见，我只是将元素参数定位为必要的 pickadate() jQuery 调用。输入已正确定位，因为当我单击它时，我会获得日期选择器界面，并且可以毫无问题地与其交互。但是，当我选择日期时，没有信息填充到输入元素中。我是否遗漏了一些明显的东西，可以允许从控件中选择日期来设置输入的值？

我已经做了一些调试，在链接函数中，元素参数似乎以某种方式包装了实际输入(似乎有一个 childNodes 数组属性包含 <input> 标签)。这可能就是为什么我收到选择器弹出窗口但所选值未设置为输入值的原因吗？

Answer 1

element 是标记中的原始元素。默认情况下不替换，innerHtml 使用模板。

您可以在指令或 element.find('input').pickadate() 中使用 replace:true 选项

其中任何一个都应该解决查看日期的视觉问题。然而，需要注意的一件重要事情是，当您使用 ng-model 并从外部代码(如 jQuery 插件)更改值时，需要使用插件 select (或任何其他插件)在pluginAPI中调用)回调来触发scope.$apply()。此信息 Angular 已从外部代码更改为 Angular 并更新内部代码