Bootstrap 3 DateTimePicker - 在“dp.change”之后绑定到角度模型不起作用答案

【问题标题】：Bootstrap 3 DateTimePicker - binding to angular model doesn't work after 'dp.change'Bootstrap 3 DateTimePicker - 在“dp.change”之后绑定到角度模型不起作用
【发布时间】：2016-05-04 12:03:22
【问题描述】：

我正在尝试使用来自eonasdan 的Bootstrap 3 DateTimePicker。一切正常，但我遇到了将输入中的实际日期绑定到角度 ng-model 的问题。当我使用选择器更改数据时，'dp.change' 事件正在工作，输入中的日期正在更改，但我必须按空格键或任何其他键来实现 ng-model 更新检测。

一些和平的代码：

带有角度指令的 JS：

(function () {
    'use strict';

    var module = angular.module('feedApp');

    module.directive('datetimepicker', [
        '$timeout',
        function ($timeout) {
            return {
                require: '?ngModel',
                restrict: 'EA',
                scope: {
                    options: '@',
                    onChange: '&',
                    onClick: '&'
                },
                link: function ($scope, $element, $attrs, controller) {
                    $($element).on('dp.change', function () {
                        //alert("change");
                        $timeout(function () {
                            var dtp = $element.data('DateTimePicker');
                            controller.$setViewValue(dtp.date());
                            $scope.onChange();
                        });
                    });

                    $($element).on('click', function () {
                        $scope.onClick();
                    });

                    controller.$render = function () {
                        if (!!controller) {
                            if (controller.$viewValue === undefined) {
                                controller.$viewValue = null;
                            }
                            else if (!(controller.$viewValue instanceof moment)) {
                                controller.$viewValue = moment(controller.$viewValue);
                            }
                            $($element).data('DateTimePicker').date(controller.$viewValue);
                        }
                    };

                    $($element).datetimepicker($scope.$eval($attrs.options));
                }
            };
        }
    ]);
})();

HTML：

<div style="max-width: 250px">
    <div class="input-group input-group-sm date">
        <input type="text" class="form-control" options="{format:'DD.MM.YYYY HH:mm', locale:'pl'}" datetimepicker ng-model="feed.reminderDateTime" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

知道如何解决这个问题吗？我将不胜感激。

【问题讨论】：

标签： javascript angularjs bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

回来时遇到了类似的问题。没有可参考的源代码，但我确实记得它是这样的。

因为您的 ng-model 是 ng-model="feed.reminderDateTime"

在你的控制器中你应该这样做$scope.feed = {reminderDateTime:''};

那么你应该可以通过$scope.feed.reminderDateTime这样的方式访问它

让我知道这是怎么回事

【讨论】：

【解决方案2】：

需要('datetimepicker');

Vue.directive('datetimepicker', {
    twoWay: true, //very important to bind the modeldata
    bind: function () {
        $(this.el).datetimepicker({
            format: 'YYYY/MM/DD',    //see moment for more valid date time formats
            useCurrent: false
        }).on('dp.change', function (value) {
            //todo: do the required changed to the value here 
        });
    },
    update: function (value) {
        $(this.el).val(value).trigger('dp.change');
    },
    unbind: function () {
        $(this.el).off().datetimepicker('destroy');
    }
});

【讨论】：