Angularjs ng repeat中的日期选择器指令

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

我创建了一个指令来包装我的jQuery日期选择器初始化，以便我可以使用日期选择器

这是我的指示

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显示日期选择器，但所选日期未反映在模型中

正确的方法是：

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

当您试图读取

mydate

值，但正在写入

scope.Date

变量时，您可能会误解AngularJS指令。但要正确设置

ng model

值，您应该使用

ngModelController

的函数，该函数将值设置为由

ng model

HTML属性设置的正确模型属性

这是你可能要做的事情的一个例子

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

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

---

您是否检查了

term.date

variable value，因为这是您分配日期的对象。。。