Javascript 在隐藏元素中绑定日期选择器

我在默认情况下隐藏了一些元素，并通过使用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>

---

它与默认的可见元素配合得很好。

来自角度文档：

ngIf完全删除并重新创建DOM中的元素，而不是通过displaycss属性更改其可见性

您可以做的是创建一个指令，该指令在将datepicker添加到dom时调用datepicker（将调用链接函数）：

视图：

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

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

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

<input my-date-picker' />