Angularjs 选择日期后，模型未更新

以下代码适用于纯angularjs correct，但当我将其集成到移动AngularUI应用程序时，它不会在选择日期后更新模型。如果我在没有日期选择器的情况下编辑输入字段，它可以正常工作

模板：

<div>
<label>{{myLabel}}:</label>
<input class="form-control datetime-picker" placeholder="{{myPlaceholder}}" ng-model="ngModel" required="required">
</div>

用法：

<form method="post" id="meetingForm" ng-controller="MeetingController as meetingCtrl" novalidate>    
    <datetime-picker my-placeholder="Startzeit" my-label="Startzeit" ng-model="meetingCtrl.meeting.start"></datetime-picker>
    <datetime-picker my-placeholder="Endzeit" my-label="Endzeit" ng-model="meetingCtrl.meeting.end"></datetime-picker>
</form>

Github链接：

要运行应用程序，请执行以下操作： npm安装-g bower yo gulp发电机移动式Gularui 凉亭安装 狼吞虎咽

---

gulp

每当您使用任何jQuery插件时，您都需要手动更新

范围

绑定，因为来自外部角度上下文的任何更改都不会运行角度摘要循环

要在输入更改时更新

ng模型

，您需要在其更改事件

dp.change

上更新ng模型

指令

app.directive("datetimePicker", function() {
    return {
        restrict: 'E',
        templateUrl: "datetime-picker.html",
        scope: {
            ngModel: '=',
            myPlaceholder: '@',
            myLabel: '@'
        },
        require: ['?^ngModel'],
        link: function(scope, element, attrs, ngModelCtrl) {
            var dpElement = $(element).find('.datetime-picker');
            dpElement.datetimepicker({
                format: "dd.mm.yyyy hh:ii",
                autoclose: true,
                language: "de",
                startDate: new Date(),
                minuteStep: 10
            });
            dpElement.on('dp.change', function(event) {
                //need to run digest cycle for applying bindings
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(event.date);
                });
            });
        }
    };
});

---

这里的详细解释与此类似。

此

要求：[“？^ngModel]”，

在我看来很奇怪。。。 如果你需要一件东西，在我看来，它不能是可选的，对吗

尝试使用

require:'ngModel'，

并告诉我它是否有效

您需要使用以下选项：

dpElement.on('changeDate', function(ev) {
            //need to run digest cycle for applying bindings
            scope.$apply(function() {
                ngModelCtrl.$setViewValue(ev.date);
            });
        });

---

但请注意不要调用参数

事件

。这是JavaScript中的保留字

@pankajparkar元素是一个包含label和input元素的div元素。请尝试

$（元素）。查找（'.datetime picker'）。datetimepicker

看起来就像每次您为所有具有

datetime picker

的元素初始化datepicker一样class@pankajparkar谢谢，这很有效，但它并没有解决问题，它不起作用，但我已经阅读了其他关于jquery更新行为的帖子。我提供了一个包含所有依赖项的github链接。@knobli您的代码是否仅在mobile上有问题？或者chrome也出现了同样的问题？@knobli你能创建一个plunkr/Fiddle吗？有很多依赖项，正如我说的，它可以使用原生angularjs。你不能使用github链接吗？这里有一个包含所有依赖项的bower文件。@knobli需要更多帮助吗？谢谢，三个更改（require、事件名称、参数名称）完成了任务。

dpElement.on('changeDate', function(ev) {
            //need to run digest cycle for applying bindings
            scope.$apply(function() {
                ngModelCtrl.$setViewValue(ev.date);
            });
        });