javascript - 如何检测 angularJS 中的引导日期时间选择器更改事件

Question

我正在以 Angular 使用这个日期时间选择器。

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

在我的 Controller 内部:

$('#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>       

一切都由 Controller “AppController”管理。 问题是，当我通过单击在日历上选择一个日期时，它不会触发任何“更改”事件(换句话说，不会触发 datechange)。如果我在 ng-model“adate”上做 watch ，它似乎也不会触发它。如果我在文本框中键入内容，则范围变量会发生变化。

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

Answer 1

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

boostrap 3 datetimepicker event documentation

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" />