Question

我制作了一个日期选择器指令，该指令使用改进的datepicker库中的单个日期选择器。它有两个输入标签和一个OK按钮。

Date Picker Library

Single Date Picker Example

如果我通过键盘更改输入字段的值，模型将获得所需的值，并按预期方式调用服务器。当我使用日期选择器时出现问题。模型的值不会改变。它仍然具有我通过键盘设置的相同值。

但如果我使用控制台运行document.getElementById('frompicker').value，它会显示我使用datepicker设置的正确日期。

如果我没有从键盘设置任何值并仅使用datepicker下拉列表，则模型的值是未定义的。

我尝试过为Angular Boostrap UI Datepicker和Angular UI Datepicker提供的一些解决方案。他们都没有工作。

在评论后进行修改

可在此处找到代码 - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

非常感谢任何帮助：）

Answer 1

您应该在datepicker更改后通过

同步范围

$scope.$apply();

或

$scope.$evalAsync();

似乎是你的datepicker'/ apply.daterangepicker'事件

Answer 2

我尝试了不同答案中提到的所有方法。我的同事告诉我，不必要地使用$scope.$evalAsync()或$scope.$apply()是个坏主意。我们的代码库不使用digest，compile等。所以这造成了一个障碍。

我最终决定按照Valery Kozlov的建议（接受的答案）检测日期变更事件并手动更改模型。

我这样访问了这个日期。

$('#frompicker').val(); // can be done without jQuery as well

使用此更改模型。

// use Angular's $on to make things consistent if needed

$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
    scope.vm.from_date = $('#frompicker').val();                
});

Datepicker不绑定到Angular Model

2 个答案: