評估AngularJS模板后如何執行指令邏輯？

Question

我有一個非常簡單的問題（我不知道答案是否會如此簡單）：有一個input元素：

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

在datepicker指令由創建一個jQueryUI的日期選擇器連接到input元素。

問題是：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');
                    }

                }
            } ]);

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渲染）。