Angular UI Datepicker 不工作答案

【问题标题】：Angular UI Datepicker not workingAngular UI Datepicker 不工作
【发布时间】：2013-04-23 14:28:17
【问题描述】：

我已按照此处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/>

【问题讨论】：

标签： angularjs datepicker angular-ui

【解决方案1】：

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

请记住，AngularUI 主要包装了 jQueryUI 插件。所以你在AngularUI之前需要jQueryUI，在jQueryUI之前需要jQuery。以及 AngularUI 之前的 Angular 本身。只需确保您具有以下 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模块。

【讨论】：

我已经用我的参考资料更新了我的问题，也许我在那里搞砸了。
我已经在我的应用程序中复制/粘贴了你的工作示例，但它仍然失败，我一定有一些配置错误。
您是否检查过网络选项卡以查看是否已加载所有依赖项？你没有得到任何404吗？为什么有jquery-ui.js?body=1 和jquery-ui-1.10.2.custom.min.js?body=1？
正在加载所有依赖项，我没有收到任何 404。也许该重复项可能会导致一些问题，我将在明天访问代码时对其进行测试！
终于解决了！问题是由 module.js 引用引起的，即当您下载 angular-ui 时，一个 js 位于 common 目录中。我不知道我何时或为什么添加它，但现在我删除了它，它可以工作了。感谢您的帮助！

【解决方案2】：

作为一种解决方法，在我的项目中使用 angular 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>

【讨论】：

【解决方案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
};

【讨论】：