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

【问题标题】：How execute directive logic after AngularJS template is evaluated?评估 AngularJS 模板后如何执行指令逻辑？
【发布时间】：2015-05-19 07:09:40
【问题描述】：

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

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

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

问题是：Datepicker 不能那样工作（当我选择日期时，它会抛出“未捕获的异常：缺少此 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');
                    }

                }
            } ]);

【问题讨论】：

标签： javascript angularjs angularjs-directive datepicker

【解决方案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 渲染）。

【讨论】：