Question

我有一个非常简单的问题（我不知道答案是否会如此简单）：有一个input元素：

<input type="text" datepicker  id="something-{{someValue}}" ng-model="someModel">

datepicker指令包括创建链接到input元素的jQueryUI日期选择器。

问题是：Datepicker不能像那样工作（当我选择日期时，它会抛出“未捕获的异常：缺少此日期选择器的实例数据”）。我认为问题在于，datepicker需要一个id来注册，但是当它注册时，id部分还没有被评估。

在评估角度模板后，如何执行datepicker指令逻辑？

这是指令代码：

directives.directive('datepicker', [
            'Commons',
            function(Commons) {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function(scope, element, attrs) {
                        element.datepicker({
                            onSelect : function(dateText, obj) {
                                var modelPath = $(this).attr('ng-model');
                                Commons.putObject(modelPath, scope, dateText);
                                scope.$apply();
                            }
                        }).datepicker($.datepicker.regional['fr']).datepicker(
                                "option", "dateFormat", "dd/mm/yy").datepicker(
                                "option", "showAnim", 'clip');
                    }

                }
            } ]);

Answer 1

尝试使用$ timeout

directives.directive('datepicker', ['$timeout',
        'Commons',
        function($timeout,Commons) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, element, attrs) {
                $timeout(function() {
                element.datepicker({
                    onSelect : function(dateText, obj) {
                        var modelPath = $(this).attr('ng-model');
                        Commons.putObject(modelPath, scope, dateText);
                        scope.$apply();
                    }
                }).datepicker($.datepicker.regional['fr']).datepicker(
                        "option", "dateFormat", "dd/mm/yy").datepicker(
                        "option", "showAnim", 'clip');
            })}};

        } ]);

使用$ timeout对您的工作进行排队，使其在当前摘要周期后运行（同时等待浏览器完成DOM渲染）。

如何评估AngularJS模板后的执行指令逻辑？

1 个答案: