AngulasJS命令でPikadayを開く

Question

PikadayをAngularJS命令で表示することは困難です。 exempleの場合：

のindex.html：

<my-directive></my-directive> 

controller.js

MyApp.directive('myDirective', function(){ 
    return{ 
     restrict: 'E', 
     templateUrl: ".../my-directive.html", 
    }; 
}); 

私-directive.html：

<input id="view_service" type="text" readonly> 
<div id="view_service_cont"></div> 

Pikadayの設定：私はのindex.htmlに直接入力をテストし

const view_datepiker = new Pikaday({ 
    field: document.getElementById('view_service'), 
    container: document.getElementById('view_service_cont'), 
    format: 'DD/MM/YYYY', 
    firstDay: 1, 
    minDate: new Date(2017, 0, 1), //Será necessário automatizar a data do calendário 
    maxDate: new Date(2019, 12, 31), 
    yearRange: [2017,2019], 
    onSelect: function() { 
     $scope.reset_pax(); 
     $scope.$digest(); 
     $scope.sale_form.date_selected = view_datepiker.getDate(); 
     //$('#datepicker').css('border-color','#78FA89'); 
     //$('#pax_num_container').css('border-color','#cccccc'); 
    }, 
    i18n: { 
       previousMonth : 'Último mês', 
       nextMonth  : 'Próximo mês', 
       months  : ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], 
       weekdays  : ['Domingo','Segunda-Feira','Terça-Feira','Quarta-Feira','Quinta-Feira','Sexta-Feira','Sábado'], 
       weekdaysShort : ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'] 
      }, 
    disableDayFn: function(theDate) { 
     theDate = theDate.toISOString().split('T')[0]; 
     if ($scope.current_service.availabilities.hasOwnProperty(theDate)) { 
      return 0; 
     }else { 
      return 1; 
     } 
    } 
}); 

が、それがうまく働きました。しかし、今私は物事を簡単にするために、この指示を作成し、フィールドをクリックすると、datepikerが表示されません。

AngularJS指令でPikadayを表示する方法を知っている人はいますか？

Answer 1

調査：私はこのコードを追加しました：

console.log($('#view_service')[0]); 

要素<input id="view_service" type="text" readonly>はindex.htmlをコンソールログには、次のテキストを返しているとき：<input id="view_service" type="text" readonly>

同じ要素がありますangularJS指示文では、返す：undefined

マイ・アドバイスロードに時間がかかる場合、Pikadayの設定はディレクティブの前にロードされるため、要素はDOMにロードされませんでした。

解決策：ページが読み込まれ、正常に機能することを通知するコードの後ろにPikaday設定を置きます。

私はそれが同じ問題を持つ人々を助けることを願っています！