2016-02-02 19 views
5

Sto cercando di utilizzare jQuery datepicker nel mio AngularJS app, ma ottengo il seguente messaggio di errore:jQuery datepicker con AngularJS: "TypeError: element.datePicker non è una funzione"

jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function" 

Sono utilizzando il codice da questa risposta: jQuery ui datepicker with Angularjs

Ecco un violino di lavoro da quella stessa risposta: http://jsfiddle.net/kevinj/TAeNF/2/

questo è il codice completo che sto utilizzando:

<html> 
<head> 
    <script src="/js/angular.min.js"></script> 
    <script src="/lib/jquery/jquery-1.12.0.min.js"></script> 
    <script src="/lib/jquery/jquery-ui-1.11.4.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="/lib/jquery/jquery-ui-1.11.4.min.css"> 
</head> 

<body ng-app="app"> 

<script> 
var datePicker = angular.module('app', []); 

datePicker.directive('jqdatepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      element.datePicker({ 
       dateFormat: 'DD, d MM, yy', 
       onSelect: function (date) { 
        scope.date = date; 
        scope.$apply(); 
       } 
      }); 
     } 
    }; 
}); 
</script> 

<p><input type="text" ng-model="date" jqdatepicker></p> 
<p>{{ date }}</p> 

</body> 
</html> 

Cosa diavolo sto facendo di sbagliato? Grazie!

risposta

4

Quando si carica AngularJS prima di jQuery, per impostazione predefinita verrà utilizzato jQLite che è l'API jQuery più piccola che è stata presente all'interno di Angular.

Fondamentalmente è necessario includere jQuery prima di angular js per utilizzare l'API jQuery per impostazione predefinita durante l'interrogazione del DOM.

In caso contrario è necessario utilizzare in modo esplicito $(element)

NOTE

Make sure both the jQuery library version should be same, jQuery & jQuery.ui both.

Demo Fiddle

+0

Grazie per la vostra risposta Pankaj, ma purtroppo è ancora lo stesso. Nel caso in cui, ho cambiato alle librerie online, ma nessun cambiamento. Queste sono le librerie che sto usando: http://code.jquery.com/jquery-1.12.0.min.js http://code.jquery.com/ui/1.11.4/jquery-ui.min .js http://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular .min.js –

+0

@MarcusEdensky controlla la risposta aggiornata.Assicurati anche che le versioni della libreria siano uguali .. e usa la versione angolare più stabile che è '1.4.8' –

+0

Grazie ancora Pankaj, ma ancora non funziona. Ho aggiornato ad Angular 1.4.9 (apparentemente stabile) e usando 1.12.0 di jQuery e jQuery UI. Hai qualche idea? –

Problemi correlati