Open Pikaday in einer AngulasJS-Direktive

Es ist schwierig, den Pikaday in einer AngularJS-Direktive anzuzeigen. Für exemple:Open Pikaday in einer AngulasJS-Direktive

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 config:

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

Wenn ich die Eingang direkt im index.html getestet, es funktionierte gut. Aber jetzt habe ich diese Anweisung erstellt, um die Dinge einfacher zu machen und wenn ich in das Feld klicke, erscheint der Datepiker nicht.

Kann jemand den Pikaday in einer AngularJS-Direktive zeigen?

Quelle

2017-12-05 Christian Barreto

Wo ist Ihre Konfiguration eingestellt? Wenn Sie eine Direktive verwenden, können Sie versuchen, sie in einen Link zu setzen. BTW, wenn Sie eine jsfiddle oder etwas setzen, kann ich vielleicht hilfreicher sein, z. B. was ist $ scope.current_service? – Yaser

Ich habe diesen Code hinzugefügt: '' 'console.log ($ ('# view_service') [0]);' '' Wenn das Element '' '' '' ist in der index.html Das Konsolenprotokoll gibt den Text zurück: '' < '' ' Wenn dasselbe Element in einer angularJS-Direktive ist es gibt zurück '' 'undefined''' Ich denke, das Problem ist da ... irgendeinen Vorschlag? –

Investigation: Ich habe diesen Code hinzugefügt:

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

Wenn das Element <input id="view_service" type="text" readonly> in dem index.html Konsolenprotokoll ist gibt den folgenden Text: <input id="view_service" type="text" readonly>

Wenn das gleiche Element in einer angularJS-Anweisung gibt es zurück: undefined

Mein Vorschlag Seit der Seite Das Laden dauert einige Zeit, die Pikaday-Konfiguration wird vor der Anweisung geladen, daher wurde das Element nicht im DOM geladen.

Lösung: Ich setzte die Pikaday Konfiguration nach dem verantwortlichen Code, um zu informieren, wenn die Seite geladen wird und es gut funktionierte.

Ich hoffe, es kann Menschen mit dem gleichen Problem helfen!

Quelle

2017-12-05 22:59:45

Open Pikaday in einer AngulasJS-Direktive

Antwort

Verwandte Themen