Javascript 在AngularJS应用程序的多个ng视图上使用引导Datetimepicker DOM对象

我试图在angular应用程序上实现两个ng视图，每个视图都使用引导Datetimepicker来选择日期。对于每个视图，我在angular controller之外都有一个javascript$document.ready函数，它自然会配置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);
      });


    });

此代码使用id datetimepicker12配置DOM div

当我加载初始视图时，一切都按预期工作，datetimepicker已正确配置并显示。但是，当我更改ng视图时，自然不会再次调用$document.ready，因为它在第一次加载应用程序时已被调用，并且不会再次配置应显示在新ng视图上的datetimepicker对象。因此，它不再显示。既不在第二部分，也不在第一部分。仅当我刷新页面时，它才会再次出现。但如果我在应用程序中更改了部分，则会消失

---

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

您可以为此使用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;
      });
  });

});

---

真正解决我的问题的是为datetimepicker创建一个角度指令。有了它，我可以访问我想要的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”属性添加到保存datetimepicker的div中。

谢谢您的回答。但我的问题是函数内部的代码。我不知道如何从角度控制器中引用DOM元素和函数。