Convertire il plug-in jquery in direzione angolare

Question

Sto provando a convertire il plugin jQuery in direttiva. Ecco la libreria: Github.

Nella documentazione c'è un'opzione:

$(document).ready(function() { 
     $("#datepicker").datepicker(); 
     $("#datepickerbtn").click(function(event) { 
      event.preventDefault(); 
      $("#datepicker").focus(); 
     }) 
    }); 

direttiva che ho creato:

app.directive('dateP', function(){ 
    return{ 
     restrict:'A', 
     require:'ngModel', 
     link:function(scope, element, attr, ngModel){ 
      $(element).datepicker(scope.$eval(attr.dateP)); 
      console.log('hey'); 
      ngModel.$setViewValue(scope); 
     } 
    } 
}); 

ma non funziona, qualsiasi aiuto sarebbe apprezzare.

Plunker.

ho letto questo: https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Answer 1

Fondamentalmente è scritto ng-mode invece di ng-model e la direttiva si dovrebbe definire le opzioni Data-picker non il scope.$eval(attr.dateP) che è totalmente sbagliato. All'interno datepicker è necessario fornire loro opzioni in formato json come qui abbiamo accennato opzione come { format: 'dd/mm/yyyy' })

HTML

<input date-p id="datepicker1" class="input-small" type="text" ng-model="dt"> 

direttiva

app.directive('dateP', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attr, ngModel) { 
     element.datepicker({ 
     format: 'dd/mm/yyyy' 
     }); 
    } 
    } 
}); 

Aggiornamento

Per mostrare datepicker sul clic del pulsante è necessario fare aggiungere sotto metodo all'interno del controller.

controller

$scope.showDatepicker = function(){ 
    angular.element('#datepicker1btn').datepicker('show'); 
}; 

Working Plunkr

Grazie.