AngularJS 模板求值后如何执行指令逻辑？

Question

我有一个很简单的问题（我不知道答案是否会这么简单）：有一个 input 元素：

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

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

问题是：Datepicker 不是那样工作的（当我 select 一个日期时它会抛出一个 "uncaught exception: Missing instance data for this datepicker"）。我认为问题是日期选择器需要一个 id 来注册，但是当它注册时，id 部分还没有被评估。

如何在评估 angular 模板后执行日期选择器指令逻辑？

指令代码如下：

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 模板求值后如何执行指令逻辑？

How execute directive logic after AngularJS template is evaluated?

javascript

datepicker

angularjs

angularjs-directive