jquery - AngularJs 中的数据关闭后日期选择器不工作

Question

我正在使用 jquery datepicker，如下所示:

<div class="col-md-2 rowdatepicker">
    <label>
        RECORDING DATE
    </label>
    <input type="text" class="abs-textboxdpsmall" name="textbox-recordingDate" id="recordingDateDoc" ng-model="abstractorServicesParams.recordingDate" ng-pattern="/^(\d{2})\/(\d{2})\/(\d{4})$/" required />
</div>

--

function DatepickerInit() {
    /* For calender control */
    $('#modal-footer').modal('show');
    $("#recordingDateDoc").datepicker({
        showOn: "both",
        changeYear: true,
        changeMonth: true,
        dateFormat: 'mm/dd/yy',
        yearRange: '1700:2056'
    });
}

这个日期选择器采用 AngularJs 模式，并且工作正常。模式中有一个按钮可以关闭弹出窗口。

<button type="button" class="btn btn-default" data-dismiss="modal" >CANCEL</button>

为了打开弹出窗口，我使用下面的代码

$scope.abstractorServices = function () {
        ModalService.showModal({
            templateUrl: "Templates/_AbstractorServices",
            controller: "AbstractorServicesCtrl",
            scope: $scope
        }).then(function (modal) {
            modal.element.modal();
            modal.close.then(function (result) {
                // nothing else here for now 
            });
        });
    };

第一次打开弹出窗口时，DatepickerInit 函数会触发，到目前为止一切正常。单击取消按钮后，弹出窗口关闭。再次打开相同的模态，即使在模态加载时，DatepickerInit 函数这次也会触发，日期选择器也无法工作。

我无法跟踪该问题，请帮助我确定为什么从按钮启动 Data-Dismiss 后模式内部的 DataPicker 无法工作的问题控制？

Answer 1

对于打开弹出窗口，这可能有效:

var modalInstance = $modal.open({
    templateUrl: 'Templates/_AbstractorServices',
    controller: AbstractorServicesCtrl
});

modalInstance.result.then(function (selected) {
    $scope.selected = selected;
}, function () {
    //$log.info('Modal dismissed at: ' + new Date());
});

检查这个plunker .