Datepicker不绑定到Angular Model

I've made a date picker directive that uses a single date picker from the improvely datepicker library. It has two input tags and an OK button.

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

Date Picker Library

日期选择器库

Single Date Picker Example

单日期选择器示例

If I change the value of the input field via the keyboard the models get the desired value and calls to the server take place as expected. The problem arises when I use the date picker. The value of the model does not change. It still has the same value that I set via the keyboard.

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

But if I run document.getElementById('frompicker').value using the console it shows me the right date that I set using the datepicker.

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

If I don't set any value form the keyboard and only use the datepicker drop down, the values of the models are undefined.

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

I've tried a few solutions offered for Angular Boostrap UI Datepicker and Angular UI Datepicker. None of them work.

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

Edit after a comment

评论后编辑

Code can be found here - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

代码可以在这里找到 - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

Any help is greatly appreciated :)

任何帮助是极大的赞赏 :)

2 个解决方案

#1

You should sync scope after datepicker change via

您应该在datepicker更改后同步范围

$scope.$apply();

$scope.$evalAsync();

seems it 'apply.daterangepicker' event for your datepicker

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

#2

I tried all the methods mentioned in different answers. My colleagues told that it's a bad idea to use $scope.$evalAsync() or $scope.$apply() unnecessarily. Our code base does not use digest, compile and the likes. So that was causing a hindrance.

我尝试了不同答案中提到的所有方法。我的同事告诉我们使用$ scope。$ evalAsync()或$ scope。$ apply()是不必要的。我们的代码库不使用摘要,编译等。所以这造成了一个障碍。

I finally decided to detect the date change event as suggested by Valery Kozlov (the accepted answer) and manually changing the model.

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

I accessed the date like this.

我这样访问了这个日期。

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

Changed the model using this.

使用此更改模型。

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

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

#1