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中的元素，而不是通过display css属性更改其可见性

你可以做的是创建一个指令，只要它被添加到dom中就会调用datepicker（将调用链接函数）：

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

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

查看：

<input my-date-picker' />

绑定隐藏元素中的datepicker

1 个答案: