模型在 select 个日期后未更新

Question

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

模板：

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

指令js代码：

(function(){
    var app = angular.module('MeetingApp.directives.HelpDirective', []);

    app.directive("datetimePicker", function() {
        return {
            restrict: 'E',
            templateUrl: "datetime-picker.html",
            scope: {
                ngModel: '=',
                myPlaceholder: '@',
                myLabel: '@'
            },
            require: ['?^ngModel'],
            link: function(scope, element, attrs, ngModelCtrl) {
                $(element).find('.datetime-picker').datetimepicker({
                    format: "dd.mm.yyyy hh:ii",
                    autoclose: true,
                    language: "de",
                    startDate: new Date(),
                    minuteStep: 10
                });
            }
        };
    });
})();

用法：

<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 link: https://github.com/knobli/meetingApp

到运行应用程序： npm install -g bower yo gulp generator-mobileangularui 凉亭安装 gulp 建造 gulp

Answer 1

无论何时使用任何 jQuery 插件，您都需要手动更新 scope 绑定，因为来自外部 angular 上下文的任何更改都不会运行 angular摘要循环。

要根据输入更改更新 ng-model，您需要根据其更改事件更新 ng-model dp.change。

指令

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);
                });
            });
        }
    };
});

类似这里有详细的解释。

Answer 2

这个 require: ['?^ngModel'], 我觉得很奇怪... 如果你需要一个东西，在我看来，它不能是可选的，对吧？

尝试使用 require: 'ngModel',，如果有效请告诉我。

你需要使用这个：

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

但请注意不要调用您的参数 event。这是 JavaScript 中的保留字。 Take a look at W3Schools

模型在 select 个日期后未更新

Model is not updating after select a date

angularjs

datetimepicker

mobile-angular-ui