datepicker裏面的模式不工作

我想使用ui-bootstrap組件來使模式內的日期選擇器。日期選擇器必須發送格式化爲unix時間戳的日期。datepicker裏面的模式不工作

這是工作的罰款，如果日期選擇器是不是一個模式裏面（=當日期選擇時間戳更新）：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', [ '$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>

在這個第二版時，日期更改時間戳不更新（這就像$手錶不工作）。

你知道如何使這項工作？

來源

2013-10-24 François Romain

如果我不得不猜測你遇到範圍問題;模態創建控制器的子範圍。我遇到了這個使用ng-include。我沒有看到你的dt被定義在哪裏;但我的解決方案[就我而言]是將我的'簡單值'放入控制器的一個對象中，以便在子範圍內訪問它。 [簡單的屬性不被繼承;但對象是]。 – JeffryHouser

您需要使用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

來源

2013-10-24 17:38:25

+1;我認爲我的評論是正確的。 – JeffryHouser

您必須應用與timestamp相同的技巧，並將其放入作用域中的對象上，如here。

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

來源

2013-10-24 17:43:06

datepicker裏面的模式不工作

回答

相關問題