在 AngularJS 应用中的多个 ng-views 上使用 Bootstrap Datetimepicker DOM 对象

Question

我正在尝试在 angular 应用程序上实现两个 ng-views，每个都使用 Bootstrap Datetimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/) 到 select 日期。对于每个视图，我都有一个 javascript $(document).ready 函数（当然在 angular 控制器之外），它配置 Datetimepicker:

$(document).ready(function(){

      $('#datetimepicker12').datetimepicker({
          format: 'YYYY-MM-DD',
          inline: true,
          sideBySide: false,
          minDate: moment()
      });

      var today = $('#datetimepicker12').data("DateTimePicker").getMoment();

      $('#datetimepicker12').on('dp.change', function(e) {
          angular.element(document.getElementById('reservations')).scope().setDate(e.date);
      });


    });

此代码将 DOM div 配置为 ID #datetimepicker12

当我加载初始视图时，一切都按预期工作，并且正确配置和显示了日期时间选择器。但是当我更改 ng-view 时，自然不会再次调用 $(document).ready，因为它在第一次加载应用程序之前已经调用过，并且没有配置应该出现在新 ng-view 上的 datetimepicker 对象再次。结果，它不再显示了。无论是第二部分还是第一部分。如果我刷新页面，它只会再次出现。但是如果我在应用程序中更改部分内容，然后就会消失。

有办法解决这个问题吗？我认为一种可能性是尝试在 angular 控制器之外调用一个函数，以便它能够使用 .datetimepicker() 函数配置对象。有什么建议么？谢谢！

Answer 1

您可以为此使用 viewContentLoaded 事件。你需要注入 $rootScope

$rootScope.$on('$viewContentLoaded', function() {
  $('#datetimepicker12').datetimepicker({
      format: 'YYYY-MM-DD',
      inline: true,
      sideBySide: false,
      minDate: moment()
  });

  var today = $('#datetimepicker12').data("DateTimePicker").getMoment();

  $('#datetimepicker12').on('dp.change', function(e) {
      $scope.$apply(function(){
         //need to assign ng-model='modelToPopulate' to the DOM element
         $scope.modelToPopulate = e.date;
      });
  });

});

Answer 2

真正解决我的问题的是为日期时间选择器创建一个 angular 指令。有了它，我能够访问我想要的 JQuery 对象并使用 datetimepicker 格式化函数。我应用了以下指令：

module.directive('datetimepicker', function() {
  return function(scope, element, attrs) {
      element.datetimepicker({
             format: 'YYYY-MM-DD',
                inline: true,
                sideBySide: false,
                minDate: moment()
       });

       var today = $('#datetimepicker12').data("DateTimePicker").getMoment();

       element.on('dp.change', function(e) {
             angular.element(document.getElementById('reservations')).scope().setDate(e.date);
         });
     }
});

然后在 DOM 元素上，我刚刚将 'datetimepicker' 属性添加到包含日期时间选择器的 div 中。

在 AngularJS 应用中的多个 ng-views 上使用 Bootstrap Datetimepicker DOM 对象

Using Bootstrap Datetimepicker DOM object on multiple ng-views in AngularJS app

javascript

datetimepicker

twitter-bootstrap

angularjs