angularjs - 模态内的日期选择器不起作用

Question

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

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

然后，我将指令放在模态中:http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

这是 Controller :

.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 不起作用一样)。

你知道怎么做吗？

Answer 1

您需要使用 ng-model 中著名的“点”。表达式作为 $modal 正在为窗口的内容创建一个 trasclusion 范围。换句话说，在您的 Controller 和模态内容之间创建了一个范围。

无论如何，使用 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