Question

我已按照此处所述的步骤Getting Angular UI to work和此处How to integrate AngularUI to AngularJS?，但无法弹出日期选择器。

请注意，在接受的答案中，两个帖子中的小提琴都不起作用。

有什么建议吗？这个小工具是在最新版本的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/>

Answer 1

他们缺少外部引用（JS和CSS上都有404）。所以这可能是由于缺少参考文献。这是working example。

请记住，AngularUI主要包装jQueryUI插件。所以你需要在AngularUI之前使用jQueryUI，在jQueryUI之前使用jQuery。和角度本身在AngularUI之前。请确保您拥有以下CSS：

jQueryUI（http://jqueryui.com/）
AngularUI（http://angular-ui.github.io/）
您的应用

这些JS文件按以下顺序排列：

jQuery ，因此您可以安全地加载jQuery UI插件（Datapicker）
jQueryUI ，所以你AngualrUI可以使用它的插件（Datepicker）
Angular ，因此AngularUI可以访问Angular框架
的 AngualrUI

您的模块声明，引用ui.directives模块。

Answer 2

作为一种解决方法，在我获得角度UI以在我的项目中工作之前，我制定了以下指令：

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>

Answer 3

按顺序包含以下JS

的jquery.js
的jquery-ui.js
角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
};

Angular UI Datepicker无法正常工作

3 个答案: