Angular UI Datepicker не работает

Я выполнил описанные здесь шаги Как работать с пользовательским интерфейсом Angular и здесь Как интегрировать AngularUI в AngularJS?, но не может получить всплывающее окно datepicker.

Обратите внимание, что скрипт, обновленный в обоих сообщениях в принятом ответе, не работает.

Любые предложения? это гаджет, работающий над последними версиями angular -ui?

Обновление: импорт моих ресурсов

<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>

Объявление модуля:

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

Тег:

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

Ответы

Ответ 1

Им не хватает внешних ссылок (404 на JS и CSS). Так что, вероятно, из-за недостающих ссылок. Ниже приведен рабочий пример .

Имейте в виду, что AngularUI в основном обертывает плагины jQueryUI. Поэтому вам нужно jQueryUI перед AngularUI и jQuery перед jQueryUI. И Angular перед AngularUI. Просто убедитесь, что у вас есть следующие CSS:

И эти JS файлы в следующем порядке:

  • jQuery, поэтому вы можете безопасно загружать плагины JQuery UI (Datapicker)
  • jQueryUI, поэтому вы AngualrUI можете использовать его плагин (Datepicker)
  • Angular, поэтому у AngularUI есть доступ к инфраструктуре Angular
  • AngualrUI
  • Объявление модуля, ссылающееся на модуль ui.directives.

Ответ 2

Как обходной путь, пока я не получу пользовательский интерфейс angular для работы в моем проекте, я создал следующую директиву, которая работает:

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
  }

});

и в html:

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

Ответ 3

включают следующие JS в порядке

  • jquery.js
  • JQuery-ui.js
  • angular -min.js

Я добавил следующее

<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>

в html-коде

<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>

в js, убедитесь, что вы сначала код для директивы, а затем добавьте код для контроллера, иначе это вызовет проблемы.

директива выбора даты:

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

директивный код, упомянутый выше.

После этой директивы напишите контроллер

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