在AngulasJS指令中打开Pikaday

Question

很难在AngularJS指令中显示Pikaday。例如：

index.html:

<my-directive></my-directive>

controller.js

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

my-directive.html:

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

Pikaday配置：

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;
        }
    }
});

当我在index.html中直接测试输入时，它工作得很好。但是现在我已经创建了这个指令，以使事情变得更简单，当我在字段中单击时，数据显示器就不会出现。

有人知道如何在AngularJS指令中显示Pikaday吗？

Answer 1

Investigation:我添加了以下代码：

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配置放在代码之后，负责通知页面何时加载并正常工作。

我希望它能帮助人们解决同样的问题！