Question

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

模板：

<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 凉亭安装 gulp build 吞

Answer 1

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

要更新输入更改ng-model，您需要在其更改事件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);
                });
            });
        }
    };
});

类似SO Answer这里有详细说明。

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

选择日期后，模型不会更新

2 个答案: