angularjs – 一个模态内的datepicker不工作

发布时间：2020-12-17 10:21:25 所属栏目：安全来源：网络整理

导读：我正在尝试使用ui-bootstrap组件在模态中创建一个日期选择器. datepicker必须发回格式为unix时间戳的日期. 如果日期选择器不在模态内(=选择日期时更新时间戳),这可以正常工作：http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview 然后,我把指令放在一个模

我正在尝试使用ui-bootstrap组件在模态中创建一个日期选择器. datepicker必须发回格式为unix时间戳的日期.

>如果日期选择器不在模态内(=选择日期时更新时间戳),这可以正常工作：http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview
>然后,我把指令放在一个模态：http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

这是控制器：

.controller('MyCtrl',[ '$scope','$modal',function ($scope,$modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'tplModal.html',controller: 'MyModalCtrl'
        });
    };
}])
.controller('MyModalCtrl','$modalInstance',$modalInstance) {
    $scope.required= {};
    $scope.disabled = function(date,mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
    };
    $scope.minDate = new Date();
    $scope.$watch('dt',function() { 
        if ($scope.dt) $scope.required.timestamp = Math.floor($scope.dt.getTime() / 1000); 
        console.log('timestamp: ',$scope.required.timestamp,'/ dt: ',$scope.dt);
    });
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

和模态的html模板：

<div class="modal-body">
    <div ng-model="dt">
        <datepicker min="minDate" show-weeks="false"></datepciker>
    </div>
    <div>
        dt <span class="uneditable-input span2">{{dt | date:'dd.MM.yyyy' }}</span>
        dt <span class="uneditable-input span2">{{ dt }}</span>
        timestamp <span class="uneditable-input span2">{{ required.timestamp }}</span>
    </div>
</div>

在第二个版本中,时间戳在日期更改时不会更新(就像$watch不工作一样).

你知道怎么做这个吗？

您需要在ng-model表达式中使用着名的“点”,因为$modal正在为窗口的内容创建一个trasclusion范围.换句话说,在控制器和模态的内容之间创建了一个范围.

无论如何,使用ng-model表达式中的点(这是最佳实践)可以为您解决问题：

<div ng-model="dt.value">
  <datepicker min="minDate" show-weeks="false"></datepciker>
</div>

在JavaScript中：

$scope.dt = {};
$scope.$watch('dt.value',function(newValue) { 
  if (newValue) $scope.required.timestamp = Math.floor(newValue.getTime() / 1000); 
  console.log('timestamp: ',newValue);
});

在这里工作：http://plnkr.co/edit/Adst8I8S0e0DLcVnhpLq?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!