angularJS 与日期选择器关联（不是 JQuery UI 日期选择器而是其他）

Question

我正在尝试将 angularJS 与来自此站点的日期选择器相关联：http://freqdec.github.io/datePicker/ 根据文档，这就是它如何根据 Id 创建日期选择器，它只能通过 Id 来完成，而不是 class，而不是 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)

returns空。

[]

然后我意识到没有创建 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 在指令中，第二个需要将对 datepicker() 的调用包装在 $timeout 中以延迟尝试，直到下一个 angular 循环运行，确保转换的 ID 设置在DOM.

Source

帮助 Fiddle

angularJS 与日期选择器关联（不是 JQuery UI 日期选择器而是其他）

angularJS associated with datepicker (not JQuery UI Datepicker but something else)

jquery

angularjs

datepicker