Question

我想使用jQuery datepicker和使用AngularJS动态创建的文本框。

我创建了一个指令来包装我的jQuery datepicker初始化，以便我可以使用datepicker。

这是我的指示

ERMApp.directive('angulardatepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'dd-MM-yy',
            onSelect: function (date) {
                scope.date = date;
                scope.$apply();
            }
        });
    }
};
});

当我像这样使用我的指令时，效果很好。

<input type="text" ng-model="mydate" angulardatepicker />

然而，当我的文本框在ng-repeat中时，我可以看到每个文本框上的日期选择器，但模型不会更新。

<div ng-repeat="term in terms">

    <input type="text" ng-model="term.mydate" angulardatepicker />

</div>

我总是得到term.mydate = null。 正在显示日期选择器，但所选日期未反映在模型中

Answer 1

正确的方法是：

onSelect: function (date) {
    scope.$apply(function() {
        ngModelCtrl.$setViewValue(date);
    });
}

此外，您应该注意将模型值移动到视图，覆盖$render，例如为：

link: function (scope, element, attrs, ngModelCtrl) {
    ...
    ngModelCtrl.$render = function() {
        element.datepicker('setDate', ngModelCtrl.$viewValue);
    };
}

这假设模型的视图值是Date类型。

Answer 2

当你试图读取mydate值而你正在写scope.date变量时，你在某种程度上误解了AngularJS指令。但要正确设置ng-model值，您应该使用ngModelController的函数来设置值以更正由ng-model HTML属性设置的模型属性

这是您可能尝试做的working example。

指令的配置对象与您的配置对象略有不同：

return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'd.m.yy',
            onSelect: function (date) {
                // mind the difference in setting model value
                ngModelCtrl.$setViewValue(date);
            }
        });
    }
};

ng-repeat中的Datepicker指令

2 个答案: