Bind datepicker в скрытом элементе

Question

У меня есть некоторые элементы, скрытые по умолчанию и отображаемые на некоторых нажатиях кнопок, задав угловые переменные области с помощью ng-if. Теперь проблема заключается в том, что datepicker не работает в этих скрытых элементах даже после видимого.

<div class="form-group"> 
    <label class ='col-md-2 control-label'>Receipt Mode</label> 
    <div class="col-md-4"> 
     <select ng-model="newItem.receipt_mode" required style="min-width:180px;"> 
      <option value="" ng-selected="">-Select-</option> 
      <option value="Cash">Cash</option> 
      <option value="Bank">Bank</option> 
      <option value="Cheque">Cheque</option> 
     </select> 
    </div> 
</div> 

<div class="form-group" ng-if="newItem.receipt_mode=='Cheque'"> 
    <label class ='col-md-2 control-label'>Cheque Date</label> 
    <div class="col-md-4"> 
     <input type='text' class='form-control datepicker' required ng-model='newItem.cheque_date' /> 
    </div> 
</div> 

Сценарий,

app.controller('receiptVoucherController', function($scope) { 
    $(".datepicker").datepicker({dateFormat: "m/d/yy"}); 
}); 

Он работает отлично с по умолчанию видимых элементов.

Answer 1

Из угловой документации:

ngIf полностью удаляет и воссоздает элемент в DOM, а не изменяя его видимость через свойство отображения CSS

Что вы можете сделать, это создать директиву, которая что вызывает DatePicker всякий раз, когда он добавляется к йот (функция связи будет называться):

angular.module('myApp').directive('myDatePicker', function() { 

    return{ 
     restrict: 'A', 
     link: function(scope, element){ 
      $(element).datepicker({dateFormat: "m/d/yy"}); 
     } 
    }; 
}); 

Вид:

<input my-date-picker' />