Angular UI Datepicker funktioniert nicht

Question

Ich habe die hier beschriebenen Schritte Getting Angular UI to work und hier How to integrate AngularUI to AngularJS? befolgt, kann aber nicht den Datapicker Pop-up bekommen.

Beachten Sie, dass die in beiden Posts in der angenommenen Antwort referenzierte Geige nicht funktioniert.

Irgendwelche Vorschläge? arbeitet dieses Gadget an den letzten Versionen von angular-ui?

Update: Meine Ressourcen Importe

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/directives.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script> 
<script src="/assets/module.js?body=1" type="text/javascript"></script> 
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 

Das Modul Erklärung:

angular.module('project', ['ngResource', 'ui.directives']); 

Der tag:

<input type="text" ng-model="date" ui-date/> 

Answer 1

Sie fehlen externe Referenzen (404 sowohl JS und CSS) . Das liegt vermutlich an fehlenden Referenzen. Hier ist ein working example.

Denken Sie daran, dass AngularUI hauptsächlich jQueryUI-Plugins umschließt. Sie benötigen also jQueryUI vor AngularUI und jQuery vor jQueryUI. Und Angular selbst vor AngularUI. So stellen Sie sicher, dass Sie die folgende CSSs haben:

1. jQueryUI (http://jqueryui.com/)
2. AngularUI (http://angular-ui.github.io/)
3. Ihre App

Und diese JS-Dateien in der folgenden Reihenfolge:

1. jQuery, so können Sie sicher jQuery UI Plugin laden s (Datapicker)
2. jQueryUI, so dass Sie den Einsatz seiner Plugin (Datumsauswahl)
3. Angular, so AngularUI Zugriff auf die Winkelrahmen machen
4. AngualrUI
5. Ihre Moduldeklaration AngualrUI kann , bezogen auf ui.directives Modul.

Answer 2

Als Abhilfe können, bis ich Winkel UI bekommen in meinem Projekt zu arbeiten habe ich die folgende Anweisung, die funktioniert:

project.directive('datepicker', function() { 

    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     date: '=' 
    }, 
    link: function(scope, element, attrs) { 
     element.datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function(dateText, datepicker) { 
      scope.date = dateText; 
      scope.$apply(); 
     } 
     }); 
    }, 
    template: '<input type="text" class="span2" ng-model="date"/>', 
    replace: true 
    } 

}); 

und in den HTML-Code:

<td><datepicker date="myDomainObj.startDate"></datepicker></td> 
<td><datepicker date="myDomainObj.endDate"></datepicker></td> 

Answer 3

umfassen folgende JS in der Reihenfolge

1. jquery.js
2. jquery-ui.js
3. Winkelmin.js

Ich habe die folgende

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>  

in HTML-Code

<body ng-app="myApp" ng-controller="myController"> 
// some other html code 
<input type="text" ng-model="date" mydatepicker /> 
<br/> 
{{ date }} 
//some other html code 
</body> 

in den js, stellen Sie sicher, dass Sie Code für die Richtlinie zunächst und danach den Code für Controller hinzufügen, sonst Es wird Probleme verursachen.

Datumsauswahl-Richtlinie:

var app = angular.module('myApp',[]); 
app.directive('mydatepicker', 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(); 
      } 
     }); 
    } 
    }; 
}); 

Richtlinie Code von oben Antworten bezeichnet.

Nach dieser Richtlinie, schreiben die Steuerung

app.controller('myController',function($scope){ 
//controller code 
};