Question

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

的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配置：

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 中测试输入时，它运行正常。但是现在我已经创建了这个指令以使事情变得更简单，当我点击字段时，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配置，以便在页面加载时通知它并且工作正常。

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

在AngulasJS指令中打开Pikaday

1 个答案: