一个模态内的datepicker无法正常工作

时间:2013-10-24 17:23:13

标签: angularjs angular-ui-bootstrap

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

  1. 如果日期选择器不在模态内(=选择日期时更新时间戳),这可以正常工作:http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview

  2. 然后,我把指令放在一个模态中:http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

  3. 这是控制器:

    .controller('MyCtrl', [ '$scope', '$modal', function ($scope, $modal) {
        $scope.open = function () {
            var modalInstance = $modal.open({
                templateUrl: 'tplModal.html',
                controller: 'MyModalCtrl'
            });
        };
    }])
    .controller('MyModalCtrl', [ '$scope', '$modalInstance', function ($scope, $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不工作一样)。

    你知道怎么做这个吗?

2 个答案:

答案 0 :(得分:7)

您需要使用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: ', $scope.required.timestamp, '/ dt: ', newValue);
});

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

答案 1 :(得分:1)

您必须应用与timestamp相同的技巧,并将其放在示波器上的对象中{I} here

$scope.picker = {
  dt: new Date(),
  timestamp: ''
};