angularJS与日期选择器关联(不是JQuery UI日期选择器，而是其他内容)

Question

我正试图将angularJS与来自该网站的日期选择器关联起来：http://freqdec.github.io/datePicker/根据文档，这就是它基于Id创建日期选择器的方式，它只能由Id完成，而不能由类完成，也不能由jquery obj完成。

datePickerController.createDatePicker({
formElements:{
    "inp1":"%d/%m/%Y"
}
});

我正在创建一个指令：

            .directive('datepicker', function() {
            return {
                restrict : 'A', // the directive is restricted to an attribute
                require : 'ngModel',
                link : function(scope, element, attrs, ngModelCtrl) { // the link() function is used to setup the datepicker
                    // http://freqdec.github.io/datePicker/
                    var id = attrs.id;
                    var dateFormat = "%m/%d/%Y";
                    var fe = {}
                    fe[id + ''] = dateFormat;
                    datePickerController.createDatePicker({
                        // Associate the text input to a MM/DD/YYYY date format
                        formElements : fe
                    });
                }
            }
        })

调试时，在调用之前

datePickerController.createDatePicker({
                        // Associate the text input to a MM/DD/YYYY date format
                        formElements : fe
                    });

我看到

$(id)

返回空。

[]

然后我意识到html元素并没有被创建，因为我看到了

element

有点像

<input class="col-xs-10 noPadding datepicker ng-pristine ng-untouched ng-valid" datepicker="" id="{{'licEffDate'+$index}}" ng-model="license.licEffDate">

元素中的id尚未求值。

但我只能准备好这个id，以便将其传递给日期选择器。

有办法解决这个问题吗？

Answer 1

您需要做两件事指令中的transclude:true和second需要将对datepicker()的调用封装在$timeout中，以将尝试延迟到下一个角度周期运行，从而确保在DOM中设置了已计算的ID。

源

帮助Fiddle