0

在 AngularJS 指令中显示 Pikaday 很困难。举个例子：

索引.html：

<my-directive></my-directive>

控制器.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>

皮卡迪配置：

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 吗？

4

1 回答 1

0

调查：我添加了以下代码：

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

我希望它可以帮助有同样问题的人！

于 2017-12-05T22:59:45.983 回答