如何在angularJS中检测bootstrap datetimepicker更改事件

Question

我正在角度使用这个日期时间选择器.

https://eonasdan.github.io/bootstrap-datetimepicker/

我有一个控制器内部:

$('#picker').datetimepicker();

在我的HTML中我有:

    <div id="#picker" >
        <input type='text' style="font-size:10pt;" class="rptv-input" placeholder="Start Time" ng-model='adate' ng-change="datechange()" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>       

一切都由控制器"AppController"管理.问题是,当我通过点击选择日历上的日期时,它不会触发任何"更改"事件(换句话说,不会触发日期更改).如果我对ng-model"adate"进行观察,它似乎也没有触发它.如果我在文本框中键入,则范围变量会更改.

如果用户单击选择器中的日期进行更改,如何检测文本框中的更改？

Answer 1

这是逻辑要点，但基本上您需要制定一个指令来创建日期时间选择器本身。然后在 boostrapschange()函数中，您必须执行一个$apply()触发摘要循环并更新模型的操作。

boostrap 3 datetimepicker 事件文档

angular.module('yourApp')
.directive('datetimepicker', function () {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {

            element.datetimepicker({
                change:function (date) {

                    // Triggers a digest to update your model
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });

                }
            });
        }
    } 
});

用途：

<input datetimepicker ng-model="adate" />