10

我已经按照这里描述的步骤让 Angular UI 工作和这里如何将 AngularUI 集成到 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/>
4

3 回答 3

13

它们缺少外部引用（JS 和 CSS 上都是 404）。所以这可能是由于缺少参考。这是一个工作示例。

请记住，AngularUI 主要包装了 jQueryUI 插件。所以你在AngularUI之前需要jQueryUI，在jQueryUI之前需要jQuery。以及 AngularUI 之前的 Angular 本身。只需确保您具有以下 CSS：

  1. jQueryUI ( http://jqueryui.com/ )
  2. AngularUI ( http://angular-ui.github.io/ )
  3. 你的应用

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

  1. jQuery，因此您可以安全地加载 jQuery UI 插件 (Datapicker)
  2. jQueryUI，所以你 AngualrUI 可以使用它的插件（Datepicker）
  3. Angular，因此 AngularUI 可以访问 Angular 框架
  4. AngualrUI
  5. 您的模块声明，引用ui.directives模块。
于 2013-04-23T14:45:39.053 回答
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>
于 2013-04-23T17:06:54.877 回答
1

按顺序包含以下JS

  1. jQuery.js
  2. jquery-ui.js
  3. 角-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
};
于 2015-11-25T16:47:26.233 回答