datepicker bên trong một phương thức không hoạt động

Question

Tôi đang cố gắng sử dụng các thành phần ui-bootstrap để làm cho một datepicker bên trong một phương thức. Máy ghi ngày phải gửi lại ngày được định dạng là dấu thời gian unix.

1. này đang làm việc tốt nếu datepicker không phải là bên trong một phương thức (= các bản cập nhật dấu thời gian khi ngày được chọn): http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview

2. sau đó, tôi đặt chỉ thị bên trong một phương thức: http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

đây là các bộ điều khiển:

.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'); 
    }; 
}]); 

và mẫu html của phương thức:

<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> 

Trong phiên bản thứ hai dấu thời gian này không cập nhật khi ngày được thay đổi (giống như đồng hồ $ không hoạt động).

Bạn có biết cách thực hiện tác phẩm này không?

Answer 1

Bạn cần sử dụng "dấu chấm" nổi tiếng trong biểu thức ng-model vì $ modal đang tạo phạm vi truy vấn cho nội dung của cửa sổ. Nói cách khác, có một phạm vi được tạo ra giữa bộ điều khiển và nội dung của phương thức.

Dù sao, bằng cách sử dụng dấu chấm trong biểu ng-model (đó là thực hành tốt nhất) giải quyết vấn đề cho bạn:

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

và trong 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); 
}); 

Working plunk đây: http://plnkr.co/edit/Adst8I8S0e0DLcVnhpLq?p=preview

Answer 2

Bạn sẽ phải áp dụng cùng một mẹo bạn đã làm cho timestamp và đặt nó vào một đối tượng trên phạm vi như tôi đã làm here.

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