将 angular ui bootstrap 注入 app.js，但日期选择器未显示在视图中

Question

我正在尝试使用 angular-ui-bootstrap 插件配置日期选择器。

我已下载并安装一切正常，但现在我的视图中未显示日期选择器。我没有收到任何错误 - 它只是没有在视图中呈现出来。我是 angular 的新手，所以有点迷茫。

这是我的代码：

app.js - 我在此处注入日期选择器。

angular.module('MyApp', ['ngResource', 'mgcrea.ngStrap', 'stripe', 'ui.router','ui.bootstrap',  'ui.bootstrap.datepicker', 'ngAnimate'])
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',  function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){

$locationProvider.html5Mode(true);

    $stateProvider
        // route to show our basic form (/form)
        .state('form', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })

blah blah

然后控制器：

angular.module('MyApp')
.controller('formController', ['$scope', 'Appointment',   function($scope, Appointment) {


//for the date picker directives

$scope.dateTimeNow = function() {
    $scope.date = new Date();
  };
  $scope.dateTimeNow();

  $scope.toggleMinDate = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };

  $scope.maxDate = new Date('2014-06-22');
  $scope.toggleMinDate();

  $scope.dateOptions = {
    startingDay: 1,
    showWeeks: false
  };

  // Disable weekend selection
  $scope.disabled = function(calendarDate, mode) {
    return mode === 'day' && ( calendarDate.getDay() === 0 || calendarDate.getDay() === 6 );
  };

  $scope.hourStep = 1;
  $scope.minuteStep = 15;

  $scope.timeOptions = {
    hourStep: [1, 2, 3],
    minuteStep: [1, 5, 10, 15, 25, 30]
  };

  $scope.showMeridian = true;
  $scope.timeToggleMode = function() {
    $scope.showMeridian = !$scope.showMeridian;
  };

  $scope.resetHours = function() {
    $scope.date.setHours(1);
  };

}]);

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.tpl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>


<!-- for datetimepicker-->
<script type="text/javascript" src="components/angular-ui-datetimepicker/datetimepicker.js"></script>
<!-- ENDS for datetimepicker-->


<!-- Stripe includes-->

 <script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>

<!-- Ends Stripe includes -->

html 对于日期选择器：

<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" minute-step="minuteStep" ng-model="formData.date" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions"  readonly-time="false"></datetimepicker>

我也包括 1）样式表 2) datepicker.js 3) 所有 bootstrap 等

在index.html

我可能错过了什么？

Answer 1

您不仅需要添加 'ui.bootstrap.datepicker'，还需要添加 'ui.bootstrap.datetimepicker' 模块依赖项。

你的app.js应该是这样的

angular.module('MyApp', [...'ui.bootstrap.datepicker', 'ui.bootstrap.datetimepicker'])

将 angular ui bootstrap 注入 app.js，但日期选择器未显示在视图中

injecting angular ui bootstrap into app.js, but the datepicker is not showing in view

html

javascript

datepicker

angularjs

angularjs-directive