0

我一直在玩这个漂亮的 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 调用来定位元素参数。输入被正确定位，因为当我单击它时，我提供了 datepicker 界面并且可以与之交互没有问题。但是，当我选择日期时，输入元素中不会填充任何信息。我是否遗漏了一些明显的东西，允许从控件中选择日期来设置输入值？

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

4

2 回答 2

1

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

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

于 2013-11-06T23:29:21.253 回答
1

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

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

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

于 2013-11-06T23:30:49.960 回答