在AngularJS應用中的多個ng-views上使用Bootstrap Datetimepicker DOM對象

Question

我想在角度應用上實現兩個ng視圖，每個視圖使用引導日期時間選擇器（https://eonasdan.github.io/bootstrap-datetimepicker/）來選擇日期。對於每一個圖，我有一個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-view時，自然不會再調用$（document）.ready，因爲它在第一次加載應用程序之前就已經調用過了，並且未配置應該出現在新ng-view上的datetimepicker對象再來一次。因此，它不再顯示。無論是第二還是第一部分。它只會再次出現，如果我刷新頁面。但如果我改變應用程序內的部分，然後消失。

有沒有辦法解決這個問題？我想有可能嘗試在角度控制器外部調用一個函數，以便它能夠使用.datetimepicker（）函數配置對象。有什麼建議麼？謝謝！

Answer 1

實際上解決我的問題是爲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股利。

Answer 2

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

});