Angular UI Bootstrap DatePicker customClass函數在$ watch內部沒有觸發

我試圖在其範圍更改時讓我的datePicker更新。我已經添加了手錶，但這似乎阻止了customClass函數的發射。

指令HTML

<datepicker-calendar search-response="searchResponse"></datepicker-calendar>

指令模板（日期選擇器）

<div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options" ng-if="dt"></div>

角指令代碼

var datepickerCalendarDirective = function datepickerCalendarDirective() { 
     return { 
      scope: { 
       searchResponse: '=' 
      }, 
      restrict: 'E', 
      templateUrl: './templates/directive.datepickerCalendar.tmpl.html', 
      link: function link(scope, element, attrs, $filter, policySessionService) { 

       scope.$watch('searchResponse', function() { 

        scope.dt = new Date(); 

        if (!scope.searchResponse) return ''; 

        /* setup the date picker options object. 
        * this takes a customClass function which sets the 
        * css class of the trips/events on the datepicker 
        */ 
        scope.options = { 
         customClass: getSelectedDates, 
         maxDate: new Date(), 
         showWeeks: false, 
         startingDay: 1 }; 
       }, true); 

       /* Iterate over each trip in the reponse and return either 
       * a trip or incident css class to the customClass param 
       * of the datepicker options object 
       */ 
       function getSelectedDates(data) { 
        if (scope.searchResponse.data[0] && data.mode === 'day') { 
         var trips = $filter('orderBy')(scope.searchResponse.data[0].tripDates, 'JourneyDate'), 
          journeyDate; 

         for (var i = 0; i < trips.length; i++) { 
          journeyDate = new Date(trips[i].JourneyDate).setHours(0, 0, 0, 0); 

          if (journeyDate === new Date(data.date).setHours(0, 0, 0, 0)) { 
           // return the appropriate css class for the trip type (trip or incident) 
           if (trips[i].IncidentRecorded) { 
            return 'incident'; 
           } else { 
            return 'trip'; 
           } 
          } 
         } 
        } 
        return ''; 
       } 

       // }); 
      } 
     }; 
    };

如果我刪除的範圍看，然後一切按預期工作和customClass功能火災不是

來源

2017-04-26 Tim Smart

您能否提供'。/ templates/directive.datepickerCalendar.tmpl.html'。此外，爲什麼你甚至需要reinit datepicker，你可以看模型，只是改變父級元素上的類 – Leguest

我已經添加了datepicker模板的請求 –

我不知道，但我認爲問題

if (journeyDate === new Date(data.date).setHours(0, 0, 0, 0)) {

我相信setHours修改莫名其妙原始日期對象

因此，爲了防止它，你可以保存數據對象與

function getSelectedDates(data) { 
    var _data = JSON.parse(JSON.stringify(data))

而且用_data代替data

UPDATE

我在的console.log getSelectedDates()創建的jsfiddle example，所以射擊，但什麼是if (!$scope.searchResponse) return '';點？

來源

2017-04-26 15:05:10 Leguest

嗯，我遇到的問題是，當手表觸發時，customClass函數選項對象甚至不會觸發。這隻會發生，如果我有一隻手錶，否則它工作得很好？ –

我現在已經修復了這個問題，與@Leguest的幫助:)

的問題是在時序。看起來該模型在日期選擇器呈現之前還沒有準備好。

來源

2017-04-26 16:18:09

Angular UI Bootstrap DatePicker customClass函數在$ watch內部沒有觸發

回答

相關問題