我正在编写一个简单的datepicker,并尝试动态更新maxDate属性。为此,我在datepicker指令中设置了一个手表,并且当我的手表变量更改时,只需更新maxDate即可。但是,它似乎实际上并没有更新maxDate。下面是我的代码。
HTML
<div class="modal-body" date-picker-purge-queue>
...
Select an expiry date:
<div class="input-group date" id='datetimepicker-expiry'>
<input type='text' class="form-control"
id="expiryDate"name="expiryDate"
ng-model="purgeQueueForm.expiryDate" ng-required="true">
<div class="input-group-addon">
<div class="glyphicon glyphicon-calendar"></div>
</div>
</div>
Javascript指令
app.directive("datePickerPurgeQueue", [function () {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
var minExpiryDate = new Date();
scope.$watch("purgeQueueForm.maxExpiryDate", (function (newValue) {
if (newValue) {
$( "#datetimepicker-expiry" ).datepicker( "option", "maxDate", newValue );
}
}), true);
$('#datetimepicker-expiry').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: scope.expiryDate,
minDate: minExpiryDate,
allowInputToggle: true,
ignoreReadonly: true
});
angular.element('#datetimepicker-expiry').on("dp.change dp.update dp.show dp.hide focusout", function (e) {
scope.$parent.purgeQueueItem.expiryDate = this.firstElementChild.value;
});
angular.element('#expiryDate').focusout(function () {
scope.$parent.purgeQueueItem.expiryDate = this.value;
});
}
};
}]);
我要在其中更新watch变量的Javascript控制器。
$scope.purgeQueueForm.expiryDate = "";
$scope.purgeQueueForm.maxExpiryDate = "";
// Intialize functions
initialize();
//******************** JS functions ********************/
// Initialize data
function initialize() {
getSiteData().then(function (data) {
$scope.siteData = data;
$scope.selectedSite = data[0];
getActiveIssuer().then(function (data) {
$scope.issuerData = data;
$scope.loading = true;
// Intialize expiry date
var expiryDate = new Date();
var endDate = expiryDate.getDate() + data.purgeQueueExpiryDuration;
expiryDate.setDate(endDate);
$scope.purgeQueueForm.expiryDate = expiryDate.getFullYear() + "-" + (expiryDate.getMonth() + 1) + "-" + expiryDate.getDate();
$scope.purgeQueueForm.maxExpiryDate = expiryDate;
getPurgeQueue().then(function (data) {
$scope.purgeQueueResults = data;
$scope.purgeQueueResultsDisplay = [].concat($scope.purgeQueueResults);
$scope.loading = false;
})
})
})
}
function getSiteData() {
var deferred = $q.defer();
var appServer = $rootScope.url + 'SEPM/REST/loadMasterData/getActiveSites';
$http(
{
method: 'Get',
url: '/REST/Generic/Get?url=' + appServer,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
deferred.resolve(data);
}).error(function () {
deferred.reject();
});
return deferred.promise;
}
function getPurgeQueue() {
var deferred = $q.defer();
var appServer = $rootScope.url + 'SEPM/REST/PurgeQueue/getPurgeQueue/' + $scope.issuerData.id;
$http(
{
method: 'Get',
url: '/REST/Generic/Get?url=' + appServer,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
deferred.resolve(data);
}).error(function () {
deferred.reject();
});
return deferred.promise;
}
当我调试它时,我看到范围变量正在使用日期对象进行更新,但是将其分配给datetimepicker的maxDate属性的语句没有执行任何操作。感谢您的帮助,谢谢!