Convert jquery Plugin in Direktive eckig

Question

Ich versuche, jQuery Plugin in Direktive zu konvertieren. Hier ist die Bibliothek: Github.

In der Dokumentation gibt es eine Option:

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

Richtlinie die ich angelegt habe:

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

aber es funktioniert nicht, jede mögliche Hilfe würde es zu schätzen wissen werden.

Plunker.

Ich habe diese Zeilen lesen: https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Answer 1

Sie ng-mode Grundsätzlich geschrieben statt ng-model und der Richtlinie sollten Sie Datumsauswahl Optionen nicht die scope.$eval(attr.dateP), die völlig falsch ist, definieren. Innerhalb datepicker müssen Sie ihre Optionen in json Format anzubieten, wie hier erwähnt wir Option als { format: 'dd/mm/yyyy' })

HTML

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

Richtlinie

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

aktualisieren

Für Show datepicker auf Knopf klicken müssen Sie unten Methode in Ihrem Controller hinzufügen.

-Controller

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

Working Plunkr

Dank.