选择日期后模型未更新

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

要运行应用程序： npm install -g bower yo gulp generator-mobileangularui 凉亭安装 吞咽构建 吞咽

Answer 1

这个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

Answer 2

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

要在输入更改时更新 ng-model，您需要在其更改事件 dp.change 上更新 ng-model。

指令

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

类似SO Answer这里有详细解释。