jquery - 动态表单字段上的 angularjs datepicker 指令 "Missing instance data"

Question

我有一个 angularjs 应用程序，可以跟踪家庭成员数据。更重要的字段之一是 DOB。我使用以下溢出帖子来制作自定义日期选择器指令 jQuery ui datepicker with Angularjs

这是代码

//jquery datepicker through angular
angularApp.directive('datepicker', function() {
return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat:'mm/dd/yy',
                minDate: new Date(1910,0,1),
                yearRange:'1910:+0',
                changeMonth: true,
                changeYear: true,
                onSelect:function (date) {
                    // ngModelCtrl.$setViewValue(date);
                    scope.date = date;
                    scope.$apply();
                }
            });
        });
    }
};
});

现在我的问题与我发现的其他一些帖子不同的是，我只能获取新家庭成员的此日期选择器缺少实例数据，这些新家庭成员可以通过单击“添加新成员”按钮创建。这是一个示例错误的链接， http://plnkr.co/edit/DdFMbNIEp39cg3yE1ar6?p=preview 。

要重现此问题，请尝试家庭成员 1 的出生日期(第一组字段)。 DOB 选择器应该可以工作，现在选择“单击以添加其他家庭成员”。这将为家庭成员 2 添加新字段，如果您单击出生日期字段，日历将弹出，但您将无法选择日期 - 而且，测试字段也不会填充。

Answer 1

通过在指令中添加 console.log()，我能够确定 angularjs html 编译器无法编译动态 id。

console.log("xxxxxx-1 "+ $(element)[0].id);

无论我创建了多少个家庭成员，他们都具有相同的 ID:

xxxxxx-1 HOUSEHOLD{{ $index + 1 }}_dob

通过将嵌入标志设置为 true 并添加时间延迟，我们可以允许编译器在尝试选择日期之前完成其工作。

//jquery datepicker through angular
angularApp.directive('datepicker', function($timeout) {
var linker = function (scope, element, attrs, ngModelCtrl) {
    $timeout( function(){
        $(element).datepicker({
            dateFormat:'mm/dd/yy',
            minDate: new Date(1910,0,1),
            yearRange:'1910:+0',
            changeMonth: true,
            changeYear: true,
            onSelect: function (date) {
                ngModelCtrl.$setViewValue(date);
                scope.$apply();
            }
        });
    });
};

return {
    restrict: 'A',
    require : 'ngModel',
    transclude: true,
    link : linker,
};

});