Question

我一直在和this slick jQuery datpicker玩一下，想把它作为我可以在我的角应用中使用的指令包装起来。该指令的代码现在非常简单：

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调用来定位元素参数。正确定位输入，因为当我点击它时，我提供了datepicker接口，并且可以与它进行交互没问题。但是，当我选择日期时，没有信息填充到输入元素中。我是否遗漏了一些明显的东西，允许从控件中选择日期来设置输入的值？

我已经完成了一些调试，在链接函数中，element参数似乎以某种方式包装实际输入（似乎有一个包含<input>标记的childNodes数组属性）。这可能就是为什么我得到了选择器的弹出窗口，但所选的值没有被设置为输入值？

Answer 1

我想你应该在你的指令定义中添加replace: true - Angular的目标是<date-picker>指令元素而不是输入。

相反，你也可以试试这个：element.children().first().pickadate();

Answer 2

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

您可以在指令或replace:true

中使用element.find('input').pickadate()选项

其中任何一个都应解决看日期的视觉问题。但是，当您使用ng-model并从外部代码（如jQuery插件）更改值时，需要注意的一件重要事情是，需要使用插件select（或者在pluginAPI中调用的任何内容）回调来触发{ {1}}。这个infomrs角度变化是从角度外部的代码和更新内部结构

指令没有被jQuery插件正确定位

2 个答案: