Convertir le plugin jquery en directive angulaire

J'essaie de convertir le plugin jQuery en directive. Voici la bibliothèque: Github .

Dans la documentation, il existe une option:

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

Directive que j'ai créée:

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

Mais cela ne fonctionne pas, toute aide serait appréciée.

Plunker .

J'ai lu ceci: https://amitgharat.wordpress.com/2013/02/03/-approach-to-use-jquery-plugins-with-angularjs/

Fondamentalement, vous avez écrit ng-mode au lieu de ng-model and directive, vous devez définir les options de sélection de date et non la scope.$eval(attr.dateP) qui est totalement erroné. À l'intérieur de la date, vous devez fournir leurs options au format json comme ici, nous avons mentionné l'option en tant que { format: 'dd/mm/yyyy' })

HTML

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

Directif

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

Mettre à jour

Pour afficher datepicker sur le bouton, vous devez ajouter une méthode ci-dessous à l'intérieur de votre contrôleur.

Manette

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

Travailler Plunkr

Merci.